/* ============================================================
   DOSYA  : Content/fuaros.css
   AÇIKLAMA: FuarOS global stil dosyası — TÜM CSS buradadır.
              cshtml dosyalarına <style> veya style="" yazılmaz (KURAL 4).
              Design System:
                Sidebar     : Deep navy (#070D1A) — "mission control" hissi
                İçerik alanı: Slate-white (#F0F4FA) — göz yormayan premium zemin
                Vurgu       : #F97316 → #FBBF24 gradient — sıcak, güçlü, global
              Referans: Linear, Stripe, Vercel, Figma, Notion Enterprise
   ============================================================ */

/* ── GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');

/* ── DESIGN TOKEN'LAR ────────────────────────────────────── */
:root {
    /* ── Ana Vurgu Renkleri ── */
    --fos-orange        : #F97316;
    --fos-orange-hover  : #EA6C0A;
    --fos-orange-end    : #FBBF24;
    --fos-orange-muted  : rgba(249, 115, 22, 0.10);
    --fos-orange-glow   : rgba(249, 115, 22, 0.25);
    --fos-accent-grad   : linear-gradient(135deg, #F97316 0%, #FBBF24 100%);

    /* ── Koyu Tema (Sidebar/Navbar) ── */
    --fos-dark-base     : #070D1A;
    --fos-dark-surface  : #0D1626;
    --fos-dark-card     : #111C30;
    --fos-dark-border   : #1E2D45;
    --fos-dark-text     : #E2E8F2;
    --fos-dark-muted    : #5A7499;
    --fos-dark-subtle   : #2A3F5E;

    /* ── Açık Tema (İçerik Alanı) ── */
    --fos-light-bg      : #EFF4FB;
    --fos-light-surface : #FFFFFF;
    --fos-light-border  : #DDE5F0;
    --fos-text-primary  : #0F172A;
    --fos-text-secondary: #475569;
    --fos-text-muted    : #94A3B8;

    /* ── Durum Renkleri ── */
    --fos-success       : #059669;
    --fos-success-bg    : #ECFDF5;
    --fos-warning       : #D97706;
    --fos-warning-bg    : #FFFBEB;
    --fos-danger        : #DC2626;
    --fos-danger-bg     : #FEF2F2;
    --fos-info          : #2563EB;
    --fos-info-bg       : #EFF6FF;

    /* ── Layout ── */
    --fos-sidebar-w     : 252px;
    --fos-navbar-h      : 58px;
    --fos-radius        : 8px;
    --fos-radius-lg     : 12px;
    --fos-radius-xl     : 16px;

    /* ── Gölge Sistemi ── */
    --fos-shadow-xs     : 0 1px 2px rgba(15, 23, 42, 0.06);
    --fos-shadow        : 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
    --fos-shadow-md     : 0 4px 16px rgba(15, 23, 42, 0.10), 0 1px 4px rgba(15, 23, 42, 0.06);
    --fos-shadow-lg     : 0 12px 40px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
    --fos-shadow-orange : 0 8px 24px rgba(249, 115, 22, 0.30);

    /* ── Tipografi ── */
    --fos-font          : 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fos-font-mono     : 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* ── Geçiş ── */
    --fos-ease          : cubic-bezier(0.4, 0, 0.2, 1);
    --fos-ease-bounce   : cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET / BASE ────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--fos-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--fos-text-primary);
    background-color: var(--fos-light-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

/* ── LAYOUT ──────────────────────────────────────────────── */
body.fos-body {
    background-color: var(--fos-light-bg);
    /* Subtle dot grid — premium enterprise depth */
    background-image: radial-gradient(circle, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
    background-size: 24px 24px;
    overflow-x: hidden;
}

/* ── NAVBAR ──────────────────────────────────────────────── */
.fos-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--fos-navbar-h);
    /* Solid — şeffaflık yok, arkası görünmez */
    background: #070D1A;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 0;
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.40);
}

.fos-navbar-left {
    display: flex;
    align-items: center;
    width: var(--fos-sidebar-w);
    padding: 0 18px;
    border-right: 1px solid rgba(255,255,255,0.06);
    height: 100%;
    background: transparent;
}

.fos-logo-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.fos-logo-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.5px;
    /* Gradient text */
    background: var(--fos-accent-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fos-logo-sub {
    font-size: 9px;
    color: var(--fos-dark-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 500;
    -webkit-text-fill-color: var(--fos-dark-muted);
}

/* ── LOGO GÖRSELLERI ────────────────────────────────────── */
/* Navbar'da SVG logo — boyut + dikey hizalama */
.fos-navbar-logo-img {
    height: 28px;
    width: auto;
    display: block;
}

/* ── SIDEBAR LOGO — template'den (.sb-logo bloğu) ───────── */
.sb-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 14px 13px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    text-decoration: none;
    cursor: default;
    user-select: none;
}

.sb-logo-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    position: relative;
}

.sb-logo-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1;
    min-width: 0;
}

.sb-logo-wordmark {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
    white-space: nowrap;
    color: rgba(255,255,255,0.92);
    display: flex;
    align-items: baseline;
    gap: 0;
}

/* "OS" kısmı — orange gradient text */
.sb-logo-wordmark .os {
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sb-logo-sub {
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    font-weight: 400;
    margin-top: 3px;
    white-space: nowrap;
}

.sb-logo-accent {
    width: 22px;
    height: 1.5px;
    background: linear-gradient(90deg, #F97316 0%, #FBBF24 100%);
    border-radius: 1px;
    margin-top: 3px;
}

/* Dark mode: sb-logo dark sidebar'da zaten lacivert bg var, ek değişiklik gerekmez */

/* Mobile: logo biraz küçülür */
@media (max-width: 768px) {
    .fos-navbar-logo-img { height: 24px; }
    .sb-logo-icon        { width: 28px; height: 28px; }
    .sb-logo-wordmark    { font-size: 14px; }
}

.fos-navbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Aktif fuar göstergesi */
.fos-fuar-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.30);
    color: #FBBF24;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.12);
}

/* Küçük fuar badge — kullanıcı menu butonunda */
.fos-fuar-badge-sm {
    display: inline-flex;
    align-items: center;
    background: rgba(249,115,22,0.20);
    color: #FBBF24;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(249,115,22,0.30);
}

.fos-user-info {
    font-size: 12px;
    color: var(--fos-dark-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
}

.fos-navbar-toggle-ico { font-size: 18px; }

.fos-navbar-toggle {
    background: none;
    border: none;
    color: var(--fos-dark-muted);
    padding: 7px;
    border-radius: var(--fos-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
    margin-right: 10px;
}
.fos-navbar-toggle:hover {
    color: var(--fos-dark-text);
    background: var(--fos-dark-card);
}

.fos-btn-cikis {
    background: transparent;
    border: 1px solid var(--fos-dark-border);
    color: var(--fos-dark-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--fos-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.18s var(--fos-ease);
    font-family: var(--fos-font);
}
.fos-btn-cikis:hover {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.40);
    color: #FCA5A5;
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.fos-sidebar {
    position: fixed;
    top: var(--fos-navbar-h);
    left: 0; bottom: 0;
    width: var(--fos-sidebar-w);
    /* Deep navy gradient */
    background: linear-gradient(180deg, var(--fos-dark-base) 0%, #050B17 100%);
    border-right: 1px solid var(--fos-dark-border);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 900;
    transition: transform 0.28s var(--fos-ease);
    scrollbar-width: thin;
    scrollbar-color: var(--fos-dark-border) transparent;
}

.fos-sidebar::-webkit-scrollbar { width: 3px; }
.fos-sidebar::-webkit-scrollbar-thumb {
    background: var(--fos-dark-subtle);
    border-radius: 2px;
}

.fos-sidebar-nav { padding: 12px 0 40px; }

/* ── Sidebar section ayraç çizgisi ── */
.FS-SB-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    margin: 4px 14px;
}

/* Collapsible section label — icon + text + chevron */
.fos-sidebar-label {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 12px 7px 14px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all .15s;
}
.fos-sidebar-label:hover .FS-SB-lbl-text { color: #94a3b8; }

/* Section label icon pill — turuncu gradient */
.FS-SB-lbl-icon {
    width: 26px; height: 26px;
    background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(251,191,36,.08));
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #F97316;
    font-size: 12px;
    border: 1px solid rgba(249,115,22,.18);
    transition: all .2s;
}
.fos-sidebar-section.FS-SB-acik .FS-SB-lbl-icon,
.fos-sidebar-label:hover .FS-SB-lbl-icon {
    background: linear-gradient(135deg, rgba(249,115,22,.22), rgba(251,191,36,.14));
    border-color: rgba(249,115,22,.4);
    box-shadow: 0 0 10px rgba(249,115,22,.16);
}

/* Section label text */
.FS-SB-lbl-text {
    flex: 1;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--fos-dark-subtle);
    transition: color .15s;
}
.fos-sidebar-section.FS-SB-acik .FS-SB-lbl-text { color: #CBD5E1; }

/* Chevron — döner açıkken */
.FS-SB-chev {
    font-size: 9px;
    opacity: .45;
    flex-shrink: 0;
    transition: transform .22s ease, opacity .15s;
    margin-left: auto;
}
.fos-sidebar-section.FS-SB-acik .FS-SB-chev {
    transform: rotate(180deg);
    opacity: .9;
}
/* Collapsible items wrapper */
.FS-SB-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease;
}
.fos-sidebar-section.FS-SB-acik .FS-SB-items {
    max-height: 900px; /* en büyük section için yeterli */
}

.fos-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    color: var(--fos-dark-muted);
    font-size: 13px;
    font-weight: 400;
    border-left: 2px solid transparent;
    transition: all 0.16s var(--fos-ease);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    margin: 1px 8px;
    border-radius: var(--fos-radius);
    border-left: none;
}

.fos-sidebar-item:hover {
    background: var(--fos-dark-card);
    color: var(--fos-dark-text);
}

.fos-sidebar-item.active {
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.18) 0%, rgba(249, 115, 22, 0.06) 100%);
    color: #FCD34D;
    font-weight: 600;
    letter-spacing: 0.1px;
    /* Sol accent + dış glow */
    box-shadow: inset 3px 0 0 #F97316, 0 0 24px rgba(249, 115, 22, 0.10);
    border-radius: 8px;
}

.fos-sidebar-item i {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: #8BA3C4;
    transition: color 0.16s;
}
.fos-sidebar-item:hover i {
    color: #CBD5E1;
}

.fos-sidebar-item.active i {
    color: #F97316;
    filter: drop-shadow(0 0 8px rgba(249,115,22,0.60));
}

.fos-sidebar-divider {
    height: 1px;
    background: var(--fos-dark-border);
    margin: 8px 18px;
    opacity: 0.4;
}

/* ── MAIN WRAPPER ─────────────────────────────────────────── */
.fos-main-wrapper {
    margin-top: var(--fos-navbar-h);
    margin-left: var(--fos-sidebar-w);
    min-height: calc(100vh - var(--fos-navbar-h));
    transition: margin-left 0.28s var(--fos-ease);
}

.fos-content {
    padding: 28px;
    min-height: calc(100vh - var(--fos-navbar-h) - 44px);
    /* overflow-x:auto olan tablo wrapper'larının yatay taşmasını
       sayfanın dikey scroll yüksekliğine yansıtmayı engeller (Chrome/Webkit bug fix) */
    overflow-x: clip;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.fos-footer {
    margin-left: var(--fos-sidebar-w);
    padding: 11px 28px;
    border-top: 1px solid var(--fos-light-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--fos-text-muted);
    background: var(--fos-light-surface);
    transition: margin-left 0.28s var(--fos-ease);
}

/* ── SAYFA BAŞLIĞI ───────────────────────────────────────── */
.fos-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 18px;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg);
    box-shadow: inset 3px 0 0 #F97316, var(--fos-shadow);
}

/* Modal içi checkbox label — personel aktar seçeneği */
.fos-cari-per-aktar-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--fos-text-primary);
    cursor: pointer; user-select: none;
}
.fos-check-sm { width: 14px; height: 14px; cursor: pointer; accent-color: var(--fos-accent); flex-shrink: 0; }
body.fos-dark .fos-cari-per-aktar-label { color: var(--fos-dark-text); }

/* Header aksiyon grubu ayracı — dikey çizgi */
.fos-header-divider {
    width: 1px;
    height: 20px;
    background: var(--fos-light-border);
    flex-shrink: 0;
}
body.fos-dark .fos-header-divider { background: var(--fos-dark-border); }
@media (max-width: 768px) { .fos-header-divider { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   FS-AKSIYON-MENU — Premium Aksiyonlar Dropdown
   2+ ikincil buton varsa tek dropdown altında topla; 1 tekse direk buton.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.FS-aksiyon-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ── Tetikleyici buton ───────────────────────────────────────────────────── */
.FS-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px 7px 11px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: .01em;
    border-radius: 8px;
    /* Subtle gradient border via layered bg */
    border: 1px solid transparent;
    background:
        linear-gradient(var(--fos-light-surface), var(--fos-light-surface)) padding-box,
        linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%) border-box;
    color: #475569;
    cursor: pointer;
    transition: background .18s, box-shadow .18s, color .18s, border-color .18s;
    user-select: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.FS-menu-trigger:hover,
.FS-aksiyon-menu.open .FS-menu-trigger {
    color: #F97316;
    background:
        linear-gradient(#fff9f5, #fff9f5) padding-box,
        linear-gradient(135deg, #F97316 0%, #FBBF24 100%) border-box;
    box-shadow: 0 0 0 3px rgba(249,115,22,.1), 0 2px 8px rgba(249,115,22,.15);
}

/* Nokta ikonu — 3 dikey nokta */
.FS-menu-trigger .FS-dots {
    font-size: 14px;
    line-height: 1;
    color: #94a3b8;
    transition: color .18s;
}
.FS-menu-trigger:hover .FS-dots,
.FS-aksiyon-menu.open .FS-menu-trigger .FS-dots { color: #F97316; }

/* Şevron — açıkken düzgünce döner */
.FS-menu-trigger .FS-chevron {
    font-size: 9px;
    color: #94a3b8;
    transition: transform .22s cubic-bezier(.4,0,.2,1), color .18s;
    margin-left: 1px;
}
.FS-aksiyon-menu.open .FS-menu-trigger .FS-chevron {
    transform: rotate(180deg);
    color: #F97316;
}

/* ── Açılır panel ────────────────────────────────────────────────────────── */
.FS-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    /* Frosted glass + derin shadow */
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 12px;
    box-shadow:
        0 4px 6px -1px rgba(0,0,0,.07),
        0 10px 30px -4px rgba(0,0,0,.13),
        0 0 0 1px rgba(255,255,255,.6) inset;
    z-index: 900;
    overflow: hidden;
    padding: 5px 0;
    /* Panel içinde üst küçük accent çizgi */
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, #F97316, #FBBF24) 1;
    border-image-slice: 1;
}
/* border-image ile border-radius çakışır — pseudo ile üst çizgi */
.FS-menu-panel::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, #F97316, #FBBF24);
    margin: -5px 0 5px;        /* padding telafi */
}

/* Open state — clip-path ile içeriden açılma animasyonu */
.FS-aksiyon-menu.open .FS-menu-panel {
    display: block;
    animation: FS-panel-open .2s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes FS-panel-open {
    from { opacity: 0; transform: scale(.94) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Bölüm başlığı ───────────────────────────────────────────────────────── */
.FS-menu-group {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px 5px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #94a3b8;
}
.FS-menu-group + .FS-menu-item { padding-top: 6px; }

/* ── Menü öğesi ─────────────────────────────────────────────────────────── */
.FS-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background .12s, color .12s, padding-left .12s;
    white-space: nowrap;
    box-sizing: border-box;
}
.FS-menu-item:hover {
    background: linear-gradient(90deg, rgba(249,115,22,.06) 0%, rgba(249,115,22,.02) 100%);
    color: #EA6C0A;
    padding-left: 18px;          /* hafif kayma efekti */
}

/* İkon container — hover'da renkli hale gelir */
.FS-menu-item .FS-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 13px;
    background: #f1f5f9;
    color: #64748b;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.FS-menu-item:hover .FS-icon {
    background: rgba(249,115,22,.12);
    color: #F97316;
}
/* Danger varyant */
.FS-menu-item.danger              { color: #dc2626; }
.FS-menu-item.danger .FS-icon     { background: #fef2f2; color: #ef4444; }
.FS-menu-item.danger:hover        { background: linear-gradient(90deg, rgba(220,38,38,.06) 0%, transparent 100%); color: #dc2626; padding-left: 18px; }
.FS-menu-item.danger:hover .FS-icon { background: rgba(220,38,38,.15); color: #dc2626; }

/* Pasif öğe */
.FS-menu-item.disabled {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Ayraç çizgisi ───────────────────────────────────────────────────────── */
.FS-menu-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 20%, #e2e8f0 80%, transparent 100%);
    margin: 4px 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════════════════════ */
body.fos-dark .FS-menu-trigger {
    background:
        linear-gradient(var(--fos-dark-card), var(--fos-dark-card)) padding-box,
        linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%) border-box;
    color: #94a3b8;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
body.fos-dark .FS-menu-trigger:hover,
body.fos-dark .FS-aksiyon-menu.open .FS-menu-trigger {
    color: #FBBF24;
    background:
        linear-gradient(rgba(249,115,22,.08), rgba(249,115,22,.08)) padding-box,
        linear-gradient(135deg, #F97316 0%, #FBBF24 100%) border-box;
    box-shadow: 0 0 0 3px rgba(249,115,22,.15), 0 2px 8px rgba(0,0,0,.4);
}
body.fos-dark .FS-menu-trigger .FS-dots  { color: #475569; }
body.fos-dark .FS-menu-trigger .FS-chevron { color: #475569; }
body.fos-dark .FS-menu-trigger:hover .FS-dots,
body.fos-dark .FS-aksiyon-menu.open .FS-menu-trigger .FS-dots,
body.fos-dark .FS-menu-trigger:hover .FS-chevron,
body.fos-dark .FS-aksiyon-menu.open .FS-menu-trigger .FS-chevron { color: #FBBF24; }

body.fos-dark .FS-menu-panel {
    background: rgba(23,32,48,.97);
    border-color: rgba(255,255,255,.07);
    box-shadow:
        0 4px 6px rgba(0,0,0,.4),
        0 16px 40px rgba(0,0,0,.5),
        0 0 0 1px rgba(255,255,255,.04) inset;
}
body.fos-dark .FS-menu-group { color: #475569; }
body.fos-dark .FS-menu-item  { color: #cbd5e1; }
body.fos-dark .FS-menu-item .FS-icon { background: rgba(255,255,255,.06); color: #64748b; }
body.fos-dark .FS-menu-item:hover    { color: #FBBF24; }
body.fos-dark .FS-menu-item:hover .FS-icon { background: rgba(249,115,22,.18); color: #F97316; }
body.fos-dark .FS-menu-item.danger   { color: #f87171; }
body.fos-dark .FS-menu-item.danger .FS-icon { background: rgba(220,38,38,.15); color: #f87171; }
body.fos-dark .FS-menu-sep { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.07) 20%, rgba(255,255,255,.07) 80%, transparent 100%); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .FS-menu-panel  { min-width: 190px; }
    .FS-menu-item   { font-size: 13px; padding: 10px 14px; }
    .FS-menu-item:hover { padding-left: 18px; }
}

.fos-page-title {
    font-size: 14px;
    font-weight: 700;
    color: #0B1120;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    line-height: 1;
}

.fos-page-title i {
    font-size: 12px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fos-accent-grad);
    color: #fff;
    -webkit-text-fill-color: #fff;
    border-radius: 6px;
}

/* ── KART / PANEL ────────────────────────────────────────── */
.fos-card {
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg);
    padding: 18px 20px;
    box-shadow: inset 3px 0 0 #F97316, var(--fos-shadow);
    margin-bottom: 20px;
    transition: box-shadow 0.2s var(--fos-ease);
}

/* Card-header varsa card padding sıfır — header/body kendi padding'ini taşır */
.fos-card:has(.fos-card-header) {
    padding: 0;
}

/* Sol kenar accent — sidebar ile aynı inset shadow tekniği */

.fos-card:hover {
    box-shadow: var(--fos-shadow-md);
}

.fos-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(249,115,22,0.03) 0%, transparent 60%);
    border-bottom: 1px solid var(--fos-light-border);
}

.fos-card-body {
    padding: 14px 18px;
}

/* ── Yeni Cari — benzer kayıt inline paneli ─────────────── */
.fos-benzer-panel {
    background: var(--fos-light-bg);
    border: 1px solid var(--fos-border, #E5E7EB);
    border-radius: var(--fos-radius);
    padding: 10px 12px;
    height: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
}
.fos-benzer-panel-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--fos-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.fos-benzer-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 130px;
}
.fos-benzer-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    background: #fff;
    border: 1px solid var(--fos-border, #E5E7EB);
    border-radius: 5px;
    font-size: 12px;
}
.fos-benzer-item-adi {
    flex: 1;
    font-weight: 600;
    color: var(--fos-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fos-benzer-empty {
    font-size: 11px;
    color: var(--fos-text-secondary);
    text-align: center;
    padding: 14px 0;
    line-height: 1.4;
}
body.fos-dark .fos-benzer-panel  { background: var(--fos-dark-surface); border-color: rgba(255,255,255,.08); }
body.fos-dark .fos-benzer-item   { background: var(--fos-dark-card); border-color: rgba(255,255,255,.08); }
body.fos-dark .fos-benzer-item-adi { color: rgba(255,255,255,.85); }
@media (max-width: 768px) {
    .fos-benzer-panel { height: auto; min-height: 0; }
    .fos-benzer-list  { max-height: 120px; }
}

/* ── Kart içi grup ayracı — tek kartta birden fazla bölüm ─── */
.fos-card-group-sep {
    border-top: 1px solid var(--fos-border, #E5E7EB);
    margin-top: 12px;
    padding-top: 14px;
}
.fos-card-group-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--fos-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
body.fos-dark .fos-card-group-sep {
    border-top-color: rgba(255, 255, 255, 0.08);
}
body.fos-dark .fos-card-group-label {
    color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 768px) {
    .fos-card-group-sep { margin-top: 10px; padding-top: 12px; }
}

.fos-card-title {
    font-size: 12px;
    font-weight: 800;
    color: #0B1120;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.fos-card-title i {
    font-size: 14px;
    color: var(--fos-orange);
    -webkit-text-fill-color: var(--fos-orange);
}

/* ── KPI KARTLARI ────────────────────────────────────────── */
.fos-kpi {
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-xl);
    padding: 22px;
    box-shadow: inset 3px 0 0 #F97316, var(--fos-shadow);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.22s var(--fos-ease), transform 0.18s var(--fos-ease-bounce);
}

.fos-kpi:hover {
    box-shadow: inset 3px 0 0 #F97316, var(--fos-shadow-md);
    transform: translateY(-2px);
}

/* Arka plan glow */
.fos-kpi::after {
    content: '';
    position: absolute;
    top: -20px; left: -20px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(249,115,22,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.fos-kpi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fos-text-muted);
    margin-bottom: 10px;
}

.fos-kpi-value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 5px;
    background: linear-gradient(135deg, var(--fos-text-primary) 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fos-kpi-sub {
    font-size: 12px;
    color: var(--fos-text-muted);
}

.fos-kpi-icon {
    position: absolute;
    right: 18px; top: 50%;
    transform: translateY(-50%);
    font-size: 36px;
    background: var(--fos-accent-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.15;
}

/* ── TABLO ───────────────────────────────────────────────── */
/* FS-wrap içindeyken kendi border/shadow yok — FS-wrap sağlar */
.FS-wrap .fos-table-wrap {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
/* Bağımsız kullanımda (FS-wrap dışında) eski stil korunur */
.fos-table-wrap {
    overflow-x: auto;
    border-radius: var(--fos-radius-lg);
    border: 1px solid var(--fos-light-border);
    background: var(--fos-light-surface);
    box-shadow: inset 3px 0 0 #F97316, var(--fos-shadow);
    /* İnce scrollbar — sayfa yüksekliğine etki etmez */
    scrollbar-width: thin;                   /* Firefox */
    scrollbar-color: #cbd5e1 transparent;    /* Firefox thumb/track */
}
/* Chrome / Safari / Edge — 4px ince scrollbar */
.fos-table-wrap::-webkit-scrollbar        { height: 4px; }
.fos-table-wrap::-webkit-scrollbar-track  { background: transparent; }
.fos-table-wrap::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 4px; }
.fos-table-wrap::-webkit-scrollbar-thumb:hover { background: #F97316; }
/* Dark */
body.fos-dark .fos-table-wrap { scrollbar-color: #475569 transparent; }
body.fos-dark .fos-table-wrap::-webkit-scrollbar-thumb { background: #475569; }

.fos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.fos-table thead tr:first-child {
    background: linear-gradient(180deg, #F1F5FB 0%, #E8EDF5 100%);
    border-bottom: 2px solid var(--fos-light-border);
}

.fos-table thead th {
    padding: 10px 10px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #475569;
    white-space: nowrap;
    text-align: left;
    /* Sticky thead — scroll'da başlıklar sabit kalır */
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #F1F5FB 0%, #E8EDF5 100%);
    position: relative;
    user-select: none;
}

/* Sıralanabilir başlık */
.fos-table thead th.FS-sortable {
    cursor: pointer;
    padding-right: 18px;
}
.fos-table thead th.FS-sortable:hover {
    color: var(--fos-primary);
}
/* Sıralama oku — pseudo element ile */
.fos-table thead th.FS-sort-asc::after,
.fos-table thead th.FS-sort-desc::after {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--fos-primary);
}
.fos-table thead th.FS-sort-asc::after  { content: '▲'; }
.fos-table thead th.FS-sort-desc::after { content: '▼'; }

.fos-table tbody tr {
    border-bottom: 1px solid rgba(221, 229, 240, 0.6);
    transition: background 0.12s, box-shadow 0.12s;
}

.fos-table tbody tr:last-child { border-bottom: none; }

.fos-table tbody tr:nth-child(even) {
    background: rgba(240, 244, 251, 0.45);
}

.fos-table tbody tr:hover {
    background: rgba(249, 115, 22, 0.05) !important;
    box-shadow: inset 3px 0 0 var(--fos-orange);
}

.fos-table td {
    padding: 9px 10px;
    color: var(--fos-text-primary);
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════
   FOSTABLE — compact, modüler, bize özgü tablo bileşeni
   ═══════════════════════════════════════════════════════════ */

/* Dış kapsayıcı — tek bileşen, toolbar+tablo+footer birleşik */
.FS-wrap {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg);
    background: var(--fos-light-surface);
    box-shadow: inset 3px 0 0 #F97316, var(--fos-shadow);
    overflow: hidden;
}

/* ── Toolbar: FS-wrap'ın üst kısmı ─────────────────────────── */
.FS-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    flex-wrap: wrap;
    background: var(--fos-light-surface);
    border-bottom: 1px solid var(--fos-light-border);
}

/* Mod seçici — pill toggle group */
.FS-modes {
    display: inline-flex;
    gap: 1px;
    background: var(--fos-light-border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.FS-modes button {
    background: var(--fos-light-bg);
    border: none;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--fos-text-secondary);
    cursor: pointer;
    line-height: 1;
    transition: all 0.12s;
    position: relative;
}
.FS-modes button:first-child { border-radius: 6px 0 0 6px; }
.FS-modes button:last-child  { border-radius: 0 6px 6px 0; }
.FS-modes button:hover { color: var(--fos-text-primary); background: rgba(249,115,22,0.04); }
.FS-modes button.on {
    background: var(--fos-primary);
    color: #fff;
    box-shadow: 0 1px 4px rgba(249, 115, 22, 0.3);
}

/* Genel arama */
.FS-search {
    position: relative;
    flex: 1;
    max-width: 220px;
    min-width: 120px;
}
.FS-search i {
    position: absolute;
    left: 9px; top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--fos-text-secondary);
    pointer-events: none;
}
.FS-search input {
    width: 100%;
    padding: 6px 10px 6px 28px;
    border: 1px solid var(--fos-light-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--fos-light-surface);
    color: var(--fos-text-primary);
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    box-sizing: border-box;
}
.FS-search input:focus {
    border-color: var(--fos-primary);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.08);
}

/* Sayfa boyutu */
.FS-ps {
    padding: 4px 8px;
    border: 1px solid var(--fos-light-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--fos-light-surface);
    color: var(--fos-text-primary);
    cursor: pointer;
    outline: none;
}

/* Kayıt sayacı */
.FS-count {
    font-size: 12px;
    color: var(--fos-text-secondary);
    white-space: nowrap;
}
.FS-count b { color: var(--fos-text-primary); font-weight: 600; }

/* ── Sütun arama satırı ──────────────────────────────────── */
.FS-col-search th {
    padding: 5px 8px;
    background: var(--fos-light-surface);
    border-bottom: 1.5px solid var(--fos-light-border);
    /* Sticky — başlık satırının hemen altında sabit */
    position: sticky;
    top: 36px;
    z-index: 2;
}
.FS-col-inp {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--fos-light-border);
    border-radius: 4px;
    font-size: 11.5px;
    background: var(--fos-light-bg);
    color: var(--fos-text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.12s, background 0.12s;
}
.FS-col-inp:focus {
    border-color: var(--fos-primary);
    background: var(--fos-light-surface);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.08);
}
.FS-col-inp::placeholder { color: var(--fos-text-secondary); opacity: 0.5; font-style: italic; }

/* ── Ekstra panel (pivot/config/content ayarları) ─────────── */
.FS-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(249, 115, 22, 0.03);
    border-bottom: 1px solid var(--fos-light-border);
    font-size: 12px;
}
.FS-panel-label {
    font-size: 11px;
    color: var(--fos-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-right: 2px;
}

/* Chip — kolon seçimi */
.FS-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid var(--fos-light-border);
    background: var(--fos-light-surface);
    color: var(--fos-text-secondary);
    font-size: 11.5px;
    cursor: pointer;
    transition: all 0.1s;
    white-space: nowrap;
}
.FS-chip:hover { border-color: var(--fos-primary); color: var(--fos-primary); }
.FS-chip.on {
    background: rgba(249,115,22,0.1);
    border-color: var(--fos-primary);
    color: var(--fos-primary);
    font-weight: 600;
}
.FS-chip.off { opacity: 0.4; text-decoration: line-through; }

/* ── İçerik modu — sayfa navigasyonu ─────────────────────── */
.FS-content-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--fos-light-bg);
    border-top: 1px solid var(--fos-light-border);
    font-size: 12px;
}
.FS-content-nav button {
    background: none;
    border: 1px solid var(--fos-light-border);
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--fos-text-primary);
    cursor: pointer;
    transition: all 0.1s;
}
.FS-content-nav button:hover:not(:disabled) {
    border-color: var(--fos-primary);
    color: var(--fos-primary);
}
.FS-content-nav button:disabled { opacity: 0.3; cursor: default; }
.FS-content-title {
    font-weight: 600;
    color: var(--fos-text-primary);
    font-size: 13px;
}
.FS-content-info {
    color: var(--fos-text-secondary);
    font-size: 12px;
    margin-left: auto;
}

/* ── Pivot — gruplu satırlar ─────────────────────────────── */
.FS-pivot-group {
    background: rgba(249,115,22,0.04);
    border-left: 3px solid var(--fos-primary);
    cursor: pointer;
}
.FS-pivot-group td {
    padding: 8px 10px;
    font-weight: 600;
    font-size: 13px;
}
.FS-pivot-group:hover { background: rgba(249,115,22,0.08) !important; }
.FS-pivot-child { background: var(--fos-light-surface); }
.FS-pivot-child td:first-child { padding-left: 24px; }
.FS-pivot-agg {
    display: inline-flex;
    gap: 12px;
    font-size: 12px;
    color: var(--fos-text-secondary);
    margin-left: 8px;
    font-weight: 400;
}
.FS-pivot-agg b { color: var(--fos-text-primary); }

/* ── Sayfalama — minimal ─────────────────────────────────── */
.FS-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 0 2px;
}
.FS-pg {
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid var(--fos-light-border);
    border-radius: 5px;
    background: var(--fos-light-surface);
    color: var(--fos-text-primary);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}
.FS-pg:hover:not(:disabled):not(.on) {
    border-color: var(--fos-primary);
    color: var(--fos-primary);
}
.FS-pg.on {
    background: var(--fos-primary);
    border-color: var(--fos-primary);
    color: #fff;
    font-weight: 600;
}
.FS-pg:disabled { opacity: 0.3; cursor: default; }
.FS-pg-dots { color: var(--fos-text-secondary); font-size: 12px; padding: 0 2px; }
.FS-pg-info { font-size: 11px; color: var(--fos-text-secondary); margin-left: 4px; }

/* ── Tablo Footer — export + pagination + bilgi ──────────── */
/* ── Tablo Footer — FS-wrap'ın alt kısmı ─────────────────── */
.FS-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    background: var(--fos-light-surface);
    border-top: 1px solid var(--fos-light-border);
    font-size: 12px;
}

/* Export buton grubu */
.FS-export {
    display: flex;
    align-items: center;
    gap: 4px;
}
.FS-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--fos-light-border);
    border-radius: 5px;
    background: var(--fos-light-surface);
    color: var(--fos-text-secondary);
    font-size: 12px;
    font-family: var(--fos-font);
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}
.FS-export-btn i { font-size: 13px; }
.FS-export-btn:hover {
    border-color: var(--fos-primary);
    color: var(--fos-primary);
    background: rgba(249, 115, 22, 0.04);
    box-shadow: var(--fos-shadow-xs);
}

/* Footer orta — pagination buraya taşınır */
.FS-footer-center {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Footer sağ — kayıt bilgisi */
.FS-footer-info {
    font-size: 12px;
    color: var(--fos-text-secondary);
    white-space: nowrap;
}
.FS-footer-info b { color: var(--fos-text-primary); font-weight: 600; }

/* ── STATUS BADGE'LER ────────────────────────────────────── */
.fos-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Badge görünümlü inline select — Şifre Dağıt sayfasında yetki tipi değiştirme */
.fos-badge-select {
    display: inline-flex;
    align-items: center;
    padding: 3px 22px 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 5 4.5-5' fill='none' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px;
    transition: filter 0.15s, transform 0.1s;
}
.fos-badge-select:hover    { filter: brightness(0.95); }
.fos-badge-select:focus    { outline: 2px solid var(--fos-accent, #f97316); outline-offset: 1px; }
/* Renk varyantları — .fos-badge-* sınıfları mevcut, miras alır */
.fos-badge-select.fos-badge-success { background-color: var(--fos-success-bg); color: var(--fos-success); border: 1px solid rgba(5, 150, 105, 0.18); }
.fos-badge-select.fos-badge-warning { background-color: var(--fos-warning-bg); color: var(--fos-warning); border: 1px solid rgba(217, 119, 6, 0.18); }
.fos-badge-select.fos-badge-danger  { background-color: var(--fos-danger-bg);  color: var(--fos-danger);  border: 1px solid rgba(220, 38, 38, 0.18); }
.fos-badge-select.fos-badge-info    { background-color: var(--fos-info-bg);    color: var(--fos-info);    border: 1px solid rgba(2, 132, 199, 0.18); }
.fos-badge-select.fos-badge-muted   { background-color: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
body.fos-dark .fos-badge-select.fos-badge-muted { background-color: #1e293b; color: #94a3b8; border-color: #334155; }

.fos-badge-success {
    background: var(--fos-success-bg);
    color: var(--fos-success);
    border: 1px solid rgba(5, 150, 105, 0.18);
}

.fos-badge-warning {
    background: var(--fos-warning-bg);
    color: var(--fos-warning);
    border: 1px solid rgba(217, 119, 6, 0.18);
}

.fos-badge-danger {
    background: var(--fos-danger-bg);
    color: var(--fos-danger);
    border: 1px solid rgba(220, 38, 38, 0.18);
}

.fos-badge-info {
    background: var(--fos-info-bg);
    color: var(--fos-info);
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.fos-badge-muted {
    background: var(--fos-light-bg);
    color: var(--fos-text-secondary);
    border: 1px solid var(--fos-light-border);
}

/* ── BUTONLAR ────────────────────────────────────────────── */
.fos-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: var(--fos-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.18s var(--fos-ease);
    font-family: var(--fos-font);
    white-space: nowrap;
    letter-spacing: -0.1px;
    position: relative;
    overflow: hidden;
}

/* Primary — gradient + glow */
.fos-btn-primary {
    background: var(--fos-accent-grad);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.30);
}
.fos-btn-primary:hover {
    background: linear-gradient(135deg, #EA6C0A 0%, #F59E0B 100%);
    box-shadow: var(--fos-shadow-orange);
    transform: translateY(-1px);
    color: #fff;
}
.fos-btn-primary:active { transform: translateY(0); }

/* Secondary */
.fos-btn-secondary {
    background: var(--fos-light-surface);
    color: var(--fos-text-primary);
    border-color: var(--fos-light-border);
    box-shadow: var(--fos-shadow-xs);
}
.fos-btn-secondary:hover {
    background: var(--fos-light-bg);
    border-color: #C4CDD6;
    box-shadow: var(--fos-shadow);
}

/* Danger */
.fos-btn-danger {
    background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}
.fos-btn-danger:hover {
    background: linear-gradient(135deg, #B91C1C 0%, #DC2626 100%);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
    color: #fff;
}

/* Success */
.fos-btn-success {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}
.fos-btn-success:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.35);
    transform: translateY(-1px);
    color: #fff;
}

/* Warning */
.fos-btn-warning {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
}
.fos-btn-warning:hover {
    background: linear-gradient(135deg, #B45309 0%, #D97706 100%);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.35);
    transform: translateY(-1px);
    color: #fff;
}

/* Küçük boy */
.fos-btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    gap: 5px;
}

/* Ekstra küçük — tablo satır içi */
.fos-btn-xs {
    padding: 4px 8px;
    font-size: 11px;
    gap: 4px;
    border-radius: 5px;
}

/* İkon buton — tablo aksiyon sütunu için eşit ağırlıklı ghost stili */
.fos-btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    background: transparent;
    border: 1px solid var(--fos-light-border);
    color: var(--fos-text-secondary);
    box-shadow: none;
    transition: all 0.15s var(--fos-ease);
}
.fos-btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: var(--fos-shadow);
}
/* İkon buton — düzenle varyantı */
.fos-btn-icon.fos-icon-edit:hover {
    border-color: var(--fos-primary);
    color: var(--fos-primary);
    background: rgba(249, 115, 22, 0.06);
}
/* İkon buton — sil varyantı */
.fos-btn-icon.fos-icon-delete:hover {
    border-color: var(--fos-danger);
    color: var(--fos-danger);
    background: rgba(220, 38, 38, 0.06);
}
/* ── Disabled Buton Standardı ─────────────────────────────── */
/* Yetki yoksa buton pasif — tıklanamaz, soluk, gri tonlama.     */
/* pointer-events kaldırıldı ki cursor:not-allowed çalışsın.      */
/* !important: gradient/glow/renk override'ları ezsin.             */
.fos-btn.disabled,
.fos-btn[disabled] {
    background: #D1D5DB !important;
    color: #9CA3AF !important;
    border-color: #D1D5DB !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.7;
    filter: none;
    text-shadow: none;
}
/* Hover/active efektlerini de ez — soluk kalmalı */
.fos-btn.disabled:hover,
.fos-btn[disabled]:hover,
.fos-btn.disabled:active,
.fos-btn[disabled]:active,
.fos-btn.disabled:focus,
.fos-btn[disabled]:focus {
    background: #D1D5DB !important;
    color: #9CA3AF !important;
    border-color: #D1D5DB !important;
    box-shadow: none !important;
    transform: none !important;
}
/* İkon buton disabled — border + arka plan belirgin gri */
.fos-btn-icon.disabled,
.fos-btn-icon[disabled] {
    background: #F3F4F6 !important;
    color: #C4CDD6 !important;
    border-color: #E5E7EB !important;
}
.fos-btn-icon.disabled:hover,
.fos-btn-icon[disabled]:hover {
    background: #F3F4F6 !important;
    color: #C4CDD6 !important;
    border-color: #E5E7EB !important;
}
/* Dark — secondary buton (light-surface kullanıyor, dark'ta override şart) */
body.fos-dark .fos-btn-secondary {
    background: var(--fos-dark-subtle);
    color: var(--fos-dark-text);
    border-color: var(--fos-dark-border);
    box-shadow: none;
}
body.fos-dark .fos-btn-secondary:hover {
    background: var(--fos-dark-card);
    border-color: #2E4A6E;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Dark — disabled buton */
body.fos-dark .fos-btn.disabled,
body.fos-dark .fos-btn[disabled] {
    background: #374151 !important;
    color: #6B7280 !important;
    border-color: #4B5563 !important;
}
body.fos-dark .fos-btn.disabled:hover,
body.fos-dark .fos-btn[disabled]:hover {
    background: #374151 !important;
    color: #6B7280 !important;
    border-color: #4B5563 !important;
}
/* Dark — ikon buton disabled */
body.fos-dark .fos-btn-icon.disabled,
body.fos-dark .fos-btn-icon[disabled] {
    background: #1F2937 !important;
    color: #4B5563 !important;
    border-color: #374151 !important;
}
body.fos-dark .fos-btn-icon.disabled:hover,
body.fos-dark .fos-btn-icon[disabled]:hover {
    background: #1F2937 !important;
    color: #4B5563 !important;
    border-color: #374151 !important;
}

/* Aksiyon hücre boşluk düzeni */
.fos-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* ── FORM ELEMANLARI ──────────────────────────────────────── */
.fos-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fos-text-secondary);
    margin-bottom: 3px;
    letter-spacing: 0.1px;
}

/* Zorunlu alan yıldızı — label'e eklenir */
.fos-required::after {
    content: ' *';
    color: var(--fos-danger);
    font-weight: 700;
}

/* Hint — inputun altında mini bilgi notu, info ikonu ile */
.fos-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--fos-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.fos-hint i {
    font-size: 11px;
    color: var(--fos-text-muted);
    flex-shrink: 0;
}

/* Validation mesajı — server-side MVC hata mesajları */
.fos-validation {
    display: block;
    font-size: 10.5px;
    color: var(--fos-danger);
    margin-top: 2px;
    line-height: 1.3;
}

.fos-input {
    width: 100%;
    padding: 7px 11px;
    font-size: 13px;
    font-family: var(--fos-font);
    color: var(--fos-text-primary);
    background: var(--fos-light-surface);
    border: 1.5px solid var(--fos-light-border);
    border-radius: var(--fos-radius);
    transition: border-color 0.16s, box-shadow 0.16s;
    outline: none;
    box-shadow: var(--fos-shadow-xs);
}

.fos-input:focus {
    border-color: var(--fos-orange);
    box-shadow: 0 0 0 3px var(--fos-orange-muted), var(--fos-shadow-xs);
}

.fos-input::placeholder { color: var(--fos-text-muted); }

.fos-input:hover:not(:focus) {
    border-color: #CBD5E1;
}

/* Mobile — iOS auto-zoom engeli: font-size < 16px olunca zoom yapıyor */
@media (max-width: 768px) {
    .fos-input,
    .fos-input.fos-input-sm,
    .fos-sel-search-input,
    .fos-sel-trigger,
    select.fos-input,
    textarea.fos-input { font-size: 16px !important; }
}

/* Tablo içi küçük input — oda tipi satırlarında kullanılır */
.fos-input.fos-input-sm {
    padding: 5px 8px;
    font-size: 12.5px;
}

.fos-input.is-invalid {
    border-color: var(--fos-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

/* ── ALERT / BİLDİRİM ────────────────────────────────────── */
.fos-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border-radius: var(--fos-radius-lg);
    font-size: 13px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    backdrop-filter: blur(4px);
}

.fos-alert-success {
    background: var(--fos-success-bg);
    color: #065F46;
    border-color: rgba(5, 150, 105, 0.20);
    box-shadow: 0 1px 6px rgba(5, 150, 105, 0.08);
}

.fos-alert-danger {
    background: var(--fos-danger-bg);
    color: #7F1D1D;
    border-color: rgba(220, 38, 38, 0.20);
    box-shadow: 0 1px 6px rgba(220, 38, 38, 0.08);
}

.fos-alert-warning {
    background: var(--fos-warning-bg);
    color: #78350F;
    border-color: rgba(217, 119, 6, 0.20);
    box-shadow: 0 1px 6px rgba(217, 119, 6, 0.08);
}

.fos-alert-info {
    background: var(--fos-info-bg);
    color: #1E3A8A;
    border-color: rgba(37, 99, 235, 0.20);
    box-shadow: 0 1px 6px rgba(37, 99, 235, 0.08);
}

/* Dark — alert renkleri (light'ta hardcode text rengi var, dark'ta okunamaz) */
body.fos-dark .fos-alert-success {
    background: rgba(5,150,105,0.12);
    color: #6EE7B7;
    border-color: rgba(5,150,105,0.25);
    box-shadow: none;
}
body.fos-dark .fos-alert-danger {
    background: rgba(220,38,38,0.12);
    color: #FCA5A5;
    border-color: rgba(220,38,38,0.25);
    box-shadow: none;
}
body.fos-dark .fos-alert-warning {
    background: rgba(217,119,6,0.12);
    color: #FCD34D;
    border-color: rgba(217,119,6,0.25);
    box-shadow: none;
}
body.fos-dark .fos-alert-info {
    background: rgba(37,99,235,0.12);
    color: #93C5FD;
    border-color: rgba(37,99,235,0.25);
    box-shadow: none;
}

/* Dark — badge muted (light-bg kullanıyor) */
body.fos-dark .fos-badge-muted {
    background: var(--fos-dark-subtle);
    color: var(--fos-dark-muted);
    border-color: var(--fos-dark-border);
}

/* ── FOS-NOTIFY — Sayfa İçi TempData Bildirimi ──────────── */
/* fos-page-header ile aynı dil: orange sol accent, card, progress bar, X */
.fos-notify {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px 13px;
    margin-bottom: 18px;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg);
    box-shadow: inset 3px 0 0 #F97316, var(--fos-shadow);
    font-size: 13px;
    font-weight: 500;
    color: var(--fos-text-primary);
    position: relative;
    overflow: hidden;
    animation: fos-notify-in 0.22s ease;
}
.fos-notify-danger {
    box-shadow: inset 3px 0 0 #DC2626, var(--fos-shadow);
}
.fos-notify-icon {
    font-size: 15px;
    color: #F97316;
    flex-shrink: 0;
}
.fos-notify-danger .fos-notify-icon {
    color: #DC2626;
}
.fos-notify-msg {
    flex: 1;
    line-height: 1.45;
}
.fos-notify-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fos-text-muted);
    font-size: 17px;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.fos-notify-close:hover { opacity: 1; }
/* Progress bar — alt kenar, 5 sn içinde soldan sağa küçülür */
.fos-notify-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, #F97316, #FBBF24);
    animation: fos-notify-bar 5s linear forwards;
}
.fos-notify-danger .fos-notify-bar {
    background: linear-gradient(90deg, #DC2626, #F87171);
}
@keyframes fos-notify-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fos-notify-bar {
    from { width: 100%; }
    to   { width: 0%; }
}
/* Dark */
body.fos-dark .fos-notify {
    background: var(--fos-dark-card);
    border-color: var(--fos-dark-border);
    color: var(--fos-dark-text);
    box-shadow: inset 3px 0 0 #F97316, 0 2px 8px rgba(0,0,0,0.25);
}
body.fos-dark .fos-notify-danger {
    box-shadow: inset 3px 0 0 #DC2626, 0 2px 8px rgba(0,0,0,0.25);
}
body.fos-dark .fos-notify-close { color: var(--fos-dark-muted); }
/* Mobile */
@media (max-width: 768px) {
    .fos-notify { padding: 10px 12px 12px; font-size: 12px; gap: 10px; }
}

/* ── FOSTOAST — Premium Toast Bildirimi ─────────────────── */
/* Sağ üstten kayarak girer, progress bar ile otomatik kapanır */
.fos-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.fos-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 480px;
    padding: 11px 16px 13px;
    border-radius: var(--fos-radius-lg);
    font-family: var(--fos-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--fos-text-primary);
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    box-shadow: inset 3px 0 0 #F97316, var(--fos-shadow-lg);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.35s var(--fos-ease-bounce), opacity 0.3s ease;
}
.fos-toast.fos-toast-show { transform: translateX(0); opacity: 1; }
.fos-toast.fos-toast-hide { transform: translateX(120%); opacity: 0; }
/* İkon — tüm tiplerin ikonu CSS'te renklendirilir */
.fos-toast > i { font-size: 16px; flex-shrink: 0; color: #F97316; }
.fos-toast-msg { flex: 1; line-height: 1.45; }
.fos-toast-close {
    background: none; border: none; color: var(--fos-text-muted);
    font-size: 17px; cursor: pointer; padding: 0 2px; line-height: 1;
    flex-shrink: 0; opacity: 0.5; transition: opacity 0.15s;
}
.fos-toast-close:hover { opacity: 1; }
/* Progress bar — success/default: turuncu */
.fos-toast-bar {
    position: absolute; bottom: 0; left: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, #F97316, #FBBF24);
}
/* Tip varyantları — sol accent + ikon + bar rengi birlikte değişir */
.fos-toast.fos-toast-success { box-shadow: inset 3px 0 0 #F97316, var(--fos-shadow-lg); }
.fos-toast.fos-toast-danger  { box-shadow: inset 3px 0 0 #DC2626, var(--fos-shadow-lg); }
.fos-toast.fos-toast-danger > i          { color: #DC2626; }
.fos-toast.fos-toast-danger .fos-toast-bar { background: linear-gradient(90deg, #DC2626, #F87171); }
.fos-toast.fos-toast-warning { box-shadow: inset 3px 0 0 #D97706, var(--fos-shadow-lg); }
.fos-toast.fos-toast-warning > i          { color: #D97706; }
.fos-toast.fos-toast-warning .fos-toast-bar { background: linear-gradient(90deg, #D97706, #FCD34D); }
.fos-toast.fos-toast-info    { box-shadow: inset 3px 0 0 #2563EB, var(--fos-shadow-lg); }
.fos-toast.fos-toast-info > i             { color: #2563EB; }
.fos-toast.fos-toast-info .fos-toast-bar  { background: linear-gradient(90deg, #2563EB, #60A5FA); }
/* Dark mode — kart yüzeyi değişir, accent renkleri korunur */
body.fos-dark .fos-toast {
    background: var(--fos-dark-card);
    border-color: var(--fos-dark-border);
    color: var(--fos-dark-text);
    box-shadow: inset 3px 0 0 #F97316, 0 12px 40px rgba(0,0,0,0.50);
}
body.fos-dark .fos-toast.fos-toast-danger  { box-shadow: inset 3px 0 0 #DC2626, 0 12px 40px rgba(0,0,0,0.50); }
body.fos-dark .fos-toast.fos-toast-warning { box-shadow: inset 3px 0 0 #D97706, 0 12px 40px rgba(0,0,0,0.50); }
body.fos-dark .fos-toast.fos-toast-info    { box-shadow: inset 3px 0 0 #2563EB, 0 12px 40px rgba(0,0,0,0.50); }
body.fos-dark .fos-toast-close { color: var(--fos-dark-text-muted); }
@media (max-width: 768px) {
    .fos-toast-container { top: 10px; right: 10px; left: 10px; }
    .fos-toast { min-width: auto; max-width: 100%; font-size: 12.5px; padding: 10px 14px 12px; }
}

/* ── FOSCONFIRM — Premium Onay Modalı ───────────────────── */
.fos-confirm-backdrop {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(7, 13, 26, 0.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s ease;
}
.fos-confirm-backdrop.fos-confirm-show { opacity: 1; }
.fos-confirm-backdrop.fos-confirm-hide { opacity: 0; }
.fos-confirm-card {
    background: var(--fos-light-surface); border-radius: var(--fos-radius-xl);
    box-shadow: var(--fos-shadow-lg); padding: 32px 28px 24px;
    max-width: 420px; width: 90%; text-align: center;
    transform: scale(0.9) translateY(10px);
    transition: transform 0.25s var(--fos-ease-bounce), opacity 0.2s;
}
.fos-confirm-show .fos-confirm-card { transform: scale(1) translateY(0); }
.fos-confirm-hide .fos-confirm-card { transform: scale(0.9) translateY(10px); }
.fos-confirm-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%; font-size: 24px; margin-bottom: 14px;
}
.fos-confirm-danger .fos-confirm-icon  { background: rgba(220,38,38,0.10); color: var(--fos-danger); }
.fos-confirm-warning .fos-confirm-icon { background: var(--fos-orange-muted); color: var(--fos-orange); }
.fos-confirm-info .fos-confirm-icon    { background: rgba(37,99,235,0.10); color: var(--fos-info); }
.fos-confirm-title {
    font-family: var(--fos-font); font-size: 16px; font-weight: 700;
    color: var(--fos-text-primary); margin-bottom: 8px;
}
.fos-confirm-msg {
    font-family: var(--fos-font); font-size: 13px;
    color: var(--fos-text-secondary); line-height: 1.6; margin-bottom: 22px;
}
.fos-confirm-btns { display: flex; gap: 10px; justify-content: center; }
.fos-confirm-btns .fos-btn { min-width: 110px; }
body.fos-dark .fos-confirm-backdrop { background: rgba(0,0,0,0.65); }
body.fos-dark .fos-confirm-card {
    background: var(--fos-surface, #111827);
    box-shadow: 0 12px 40px rgba(0,0,0,0.50);
}
body.fos-dark .fos-confirm-title { color: var(--fos-text-primary, #F1F5F9); }
body.fos-dark .fos-confirm-msg { color: var(--fos-text-secondary, #94A3B8); }
@media (max-width: 768px) {
    .fos-confirm-card { padding: 24px 20px 20px; max-width: 340px; }
    .fos-confirm-icon { width: 48px; height: 48px; font-size: 20px; }
    .fos-confirm-title { font-size: 15px; }
    .fos-confirm-msg { font-size: 12.5px; }
    .fos-confirm-btns .fos-btn { min-width: 90px; }
}

/* ── AUTH SAYFALARI — PREMIUM SPLIT TASARIM ─────────────── */
/* Giriş sayfası: sol marka paneli + sağ form paneli          */

/* Body — tam ekran, taşma yok */
body.fos-auth-body {
    background: var(--fos-dark-base);
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    font-family: var(--fos-font);
}

/* ── SOL + SAĞ PANEL KABI ────────────────────────────────── */
.fos-auth-split {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* ── SOL PANEL (MARKA) ───────────────────────────────────── */
.fos-auth-left {
    width: 46%;
    min-width: 440px;
    background: var(--fos-dark-base);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px 56px;
}

/* Diyagonal ızgara deseni — ince ve hafif */
.fos-auth-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

/* Sağ kenar: turuncu ışıltılı çizgi */
.fos-auth-left::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(249,115,22,0.35) 25%,
        rgba(249,115,22,0.35) 75%,
        transparent 100%
    );
}

/* Hareketli arka plan ışık topları */
.fos-auth-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.fos-auth-orb-1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(249,115,22,0.14) 0%, transparent 65%);
    top: -150px; left: -150px;
    animation: fosOrbFloat1 11s ease-in-out infinite;
}
.fos-auth-orb-2 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(37,99,235,0.10) 0%, transparent 65%);
    bottom: -60px; right: -80px;
    animation: fosOrbFloat2 13s ease-in-out infinite;
}
.fos-auth-orb-3 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(139,92,246,0.09) 0%, transparent 65%);
    top: 42%; left: 52%;
    animation: fosOrbFloat3 9s ease-in-out infinite;
}
@keyframes fosOrbFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(45px, 35px); }
}
@keyframes fosOrbFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(-35px, -45px); }
}
@keyframes fosOrbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(-25px, 25px) scale(1.18); }
}

/* Sol panel ana içerik — orb'ların üstünde */
.fos-auth-left-body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Marka logosu + isim */
.fos-auth-brand-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 60px;
}
.fos-auth-brand-icon {
    width: 50px;
    height: 50px;
    background: var(--fos-accent-grad);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(249,115,22,0.45);
    flex-shrink: 0;
}
.fos-auth-brand-name {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.6px;
    background: var(--fos-accent-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Ana büyük slogan */
.fos-auth-slogan {
    font-size: 40px;
    font-weight: 800;
    color: var(--fos-dark-text);
    line-height: 1.15;
    letter-spacing: -1.2px;
    margin: 0 0 12px;
}
/* İkinci satır: turuncu gradyan */
.fos-auth-slogan-em {
    display: block;
    font-style: normal;
    background: var(--fos-accent-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Alt başlık metni */
.fos-auth-slogan-sub {
    font-size: 14.5px;
    color: var(--fos-dark-muted);
    line-height: 1.65;
    margin: 0 0 48px;
    max-width: 320px;
}

/* Özellik listesi */
.fos-auth-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.fos-auth-feature-item {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: #7A96B8;
    line-height: 1.4;
}
/* Özellik ikon kutusu */
.fos-auth-feature-icon {
    width: 32px;
    height: 32px;
    background: rgba(249,115,22,0.10);
    border: 1px solid rgba(249,115,22,0.18);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fos-orange);
    font-size: 14px;
    flex-shrink: 0;
}

/* Sol panel alt footer */
.fos-auth-left-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    border-top: 1px solid var(--fos-dark-border);
    font-size: 11.5px;
    color: var(--fos-dark-muted);
    letter-spacing: 0.3px;
}
/* Versiyon rozeti */
.fos-auth-version-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(249,115,22,0.08);
    border: 1px solid rgba(249,115,22,0.18);
    color: var(--fos-orange);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ── SAĞ PANEL (FORM) ────────────────────────────────────── */
.fos-auth-right {
    flex: 1;
    background: #EFF4FB;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 52px;
    overflow-y: auto;
}
.fos-auth-form-wrap {
    width: 100%;
    max-width: 430px;
}

/* Karşılama başlığı — koyu metin üzerine açık arka plan */
.fos-auth-welcome {
    font-size: 30px;
    font-weight: 800;
    color: var(--fos-text-primary);
    letter-spacing: -0.7px;
    margin: 0 0 7px;
}
.fos-auth-welcome-sub {
    font-size: 14px;
    color: var(--fos-text-secondary);
    margin: 0 0 28px;
    line-height: 1.5;
}

/* Form sarmalayan beyaz kart */
.fos-auth-form-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 38px;
    box-shadow:
        0 2px 8px rgba(15,23,42,0.05),
        0 12px 40px rgba(15,23,42,0.09);
    border: 1px solid rgba(221,229,240,0.85);
}

/* Input etiketi — açık arka plan için koyu renk */
.fos-auth-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--fos-text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Metin girişi — açık tema */
.fos-auth-input {
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    font-family: var(--fos-font);
    color: var(--fos-text-primary);
    background: #F7F9FC;
    border: 1.5px solid var(--fos-light-border);
    border-radius: var(--fos-radius);
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
    outline: none;
    box-sizing: border-box;
}
.fos-auth-input:hover:not(:focus) {
    border-color: #B4C6D8;
    background: #fff;
}
.fos-auth-input:focus {
    border-color: var(--fos-orange);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}
.fos-auth-input::placeholder {
    color: var(--fos-text-muted);
}
.fos-auth-input.fos-auth-input-group-left {
    /* Sağ tarafı düz — göster/gizle butonu yapışık */
    border-radius: var(--fos-radius) 0 0 var(--fos-radius);
    border-right: none;
    /* width:100% Bootstrap input-group flex'ini bozuyor — flex:1 ile düzelt */
    width: auto;
    flex: 1 1 auto;
}
.fos-auth-input.is-invalid {
    border-color: var(--fos-danger);
    box-shadow: 0 0 0 3px rgba(220,38,38,0.10);
}

/* Şifreyi göster/gizle butonu */
.fos-btn-eye {
    background: #F7F9FC;
    border: 1.5px solid var(--fos-light-border);
    border-left: none;
    color: var(--fos-text-muted);
    padding: 12px 14px;
    border-radius: 0 var(--fos-radius) var(--fos-radius) 0;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.fos-btn-eye:hover {
    color: var(--fos-orange);
    background: #fff;
}

/* Ana giriş butonu — tam genişlik */
.fos-btn-auth {
    width: 100%;
    padding: 14px;
    background: var(--fos-accent-grad);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    font-family: var(--fos-font);
    border: none;
    border-radius: var(--fos-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.18s var(--fos-ease);
    letter-spacing: 0.2px;
    box-shadow: 0 4px 16px rgba(249,115,22,0.30);
}
.fos-btn-auth:hover {
    background: linear-gradient(135deg, #EA6C0A 0%, #F59E0B 100%);
    box-shadow: 0 8px 28px rgba(249,115,22,0.45);
    transform: translateY(-1px);
}
.fos-btn-auth:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(249,115,22,0.28);
}

/* Hata uyarı kutusu */
.fos-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border-radius: var(--fos-radius);
    font-size: 13px;
    margin-bottom: 20px;
    background: rgba(220,38,38,0.06);
    border: 1px solid rgba(220,38,38,0.18);
    color: #B91C1C;
    line-height: 1.5;
}

/* Form altı bilgi satırı */
.fos-auth-form-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: var(--fos-text-muted);
}

/* ── ESKİ SİFREDEĞİŞTİR SAYFASI İÇİN KART MERKEZLEYİCİ ─── */
/* SifreDegistir.cshtml fos-auth-card kullanır — merkezlemek için */
.fos-auth-center-wrap {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: var(--fos-dark-base);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(249,115,22,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(37,99,235,0.05) 0%, transparent 50%);
}

/* Şifre değiştirme kartı — koyu cam efekti */
.fos-auth-card {
    background: rgba(13, 22, 38, 0.90);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 44px;
    width: 100%;
    max-width: 420px;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.55),
        0 0 0 1px rgba(249,115,22,0.07) inset;
}
.fos-auth-logo-block { margin-bottom: 32px; }
.fos-auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.fos-auth-subtitle {
    font-size: 13px;
    color: var(--fos-dark-muted);
    line-height: 1.5;
    margin: 0;
}
.fos-auth-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--fos-dark-text);
    margin-bottom: 5px;
    letter-spacing: -0.3px;
}

/* Şifre değiştir kartındaki label/input — koyu tema */
.fos-auth-card .fos-auth-label {
    color: #8BA3C0;
    text-transform: none;
    font-size: 12px;
    letter-spacing: 0.1px;
}
.fos-auth-card .fos-auth-input {
    color: var(--fos-dark-text);
    background: rgba(7,13,26,0.70);
    border-color: var(--fos-dark-border);
}
.fos-auth-card .fos-auth-input:hover:not(:focus) {
    border-color: var(--fos-dark-subtle);
    background: rgba(7,13,26,0.70);
}
.fos-auth-card .fos-auth-input:focus {
    border-color: var(--fos-orange);
    background: rgba(7,13,26,0.85);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}
.fos-auth-card .fos-auth-input::placeholder { color: var(--fos-dark-muted); }
.fos-auth-card .fos-auth-alert {
    background: rgba(220,38,38,0.12);
    border-color: rgba(220,38,38,0.22);
    color: #FCA5A5;
}

/* ── RESPONSIVE — 900px altı ─────────────────────────────── */
@media (max-width: 900px) {
    /* Mobilde sol panel gizle */
    .fos-auth-left  { display: none; }
    /* Sağ panel tüm genişliği kaplar */
    .fos-auth-right {
        flex: none;
        width: 100%;
        background: var(--fos-dark-base);
        padding: 32px 24px;
    }
    .fos-auth-form-wrap { max-width: 400px; }
    body.fos-auth-body   { height: auto; min-height: 100vh; overflow: auto; }
    .fos-auth-split      { height: auto; min-height: 100vh; }
    /* Sağ panel metinleri — koyu arka plan için */
    .fos-auth-welcome     { color: var(--fos-dark-text); }
    .fos-auth-welcome-sub { color: var(--fos-dark-muted); }
    .fos-auth-form-footer { color: var(--fos-dark-muted); }
    /* Form kartı — koyu cam efekti */
    .fos-auth-form-card {
        background: rgba(13,22,38,0.90);
        border-color: rgba(255,255,255,0.08);
        box-shadow: 0 20px 60px rgba(0,0,0,0.40);
    }
    /* Input'lar — koyu tema */
    .fos-auth-label { color: #8BA3C0; text-transform: none; }
    .fos-auth-input {
        background: rgba(7,13,26,0.70);
        border-color: var(--fos-dark-border);
        color: var(--fos-dark-text);
    }
    .fos-auth-input:hover:not(:focus) {
        border-color: var(--fos-dark-subtle);
        background: rgba(7,13,26,0.70);
    }
    .fos-auth-input:focus {
        border-color: var(--fos-orange);
        background: rgba(7,13,26,0.85);
    }
    .fos-auth-input::placeholder { color: var(--fos-dark-muted); }
    .fos-btn-eye {
        background: rgba(7,13,26,0.70);
        border-color: var(--fos-dark-border);
        color: var(--fos-dark-muted);
    }
    .fos-auth-alert {
        background: rgba(220,38,38,0.12);
        border-color: rgba(220,38,38,0.22);
        color: #FCA5A5;
    }
}

/* ── DIVIDER ──────────────────────────────────────────────── */
.fos-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--fos-light-border) 20%, var(--fos-light-border) 80%, transparent 100%);
    margin: 18px 0;
}

/* ── UTILITY ──────────────────────────────────────────────── */
.fos-text-muted    { color: var(--fos-text-muted) !important; }
.fos-text-orange   { color: var(--fos-orange) !important; }
.fos-text-success  { color: var(--fos-success) !important; }
.fos-text-danger   { color: var(--fos-danger) !important; }
.fos-fw-600        { font-weight: 600; }
.fos-fs-12         { font-size: 12px; }
.fos-fs-13         { font-size: 13px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
.fos-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1040;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: fosBackdropIn 0.2s var(--fos-ease);
}

.fos-sidebar-backdrop.aktif { display: block; }

@keyframes fosBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (min-width: 992px) {
    .fos-sidebar.kapali {
        transform: translateX(calc(-1 * var(--fos-sidebar-w)));
    }
    .fos-main-wrapper.tam-genislik { margin-left: 0; }
    .fos-footer.tam-genislik       { margin-left: 0; }
}

@media (max-width: 991px) {
    .fos-sidebar {
        transform: translateX(calc(-1 * var(--fos-sidebar-w)));
        z-index: 1050;
        box-shadow: 8px 0 40px rgba(0,0,0,0.55);
    }
    .fos-sidebar.acik { transform: translateX(0); }
    .fos-main-wrapper { margin-left: 0 !important; }
    .fos-footer       { margin-left: 0 !important; }
    .fos-navbar-left  { width: auto; border-right: none; padding: 0 12px; gap: 10px; }
    .fos-logo-sub     { display: none; }
    .fos-user-info    { display: none; }
    .fos-fuar-badge   { font-size: 10px; padding: 3px 9px; }
    .fos-content      { padding: 18px; }
    .fos-page-title   { font-size: 17px; }
}

@media (max-width: 575px) {
    .fos-btn-cikis .fos-btn-txt { display: none; }
    .fos-btn-cikis  { padding: 5px 9px; }
    .fos-navbar-right { gap: 7px; }
    .fos-fuar-badge span { display: none; }
    .fos-content    { padding: 14px; }
    .fos-kpi        { margin-bottom: 12px; }
    .fos-table-wrap { -webkit-overflow-scrolling: touch; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .fos-fuar-badge { font-size: 11px; padding: 4px 10px; }
    .fos-content    { padding: 22px; }
}

/* ═══════════════════════════════════════════════════════════
   FUAR SEÇİM KARTLARI (Fuar/Secim.cshtml)
   ═══════════════════════════════════════════════════════════ */
.fos-secim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 22px;
    margin-top: 18px;
}

.fos-secim-kart {
    background: var(--fos-light-surface);
    border: 1.5px solid var(--fos-light-border);
    border-radius: var(--fos-radius-xl);
    overflow: hidden;
    transition: border-color 0.20s, box-shadow 0.20s, transform 0.16s var(--fos-ease-bounce);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-shadow: var(--fos-shadow);
}

.fos-secim-kart:hover {
    border-color: var(--fos-orange);
    box-shadow: 0 8px 30px rgba(249, 115, 22, 0.18), var(--fos-shadow-md);
    transform: translateY(-3px);
}

.fos-secim-kart-aktif {
    border-color: var(--fos-orange);
    background: linear-gradient(135deg, #fff 0%, rgba(249,115,22,0.02) 100%);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15), var(--fos-shadow-md);
}

.fos-secim-kart-head {
    padding: 16px 18px 12px;
    background: linear-gradient(135deg, #F8FAFF 0%, #F0F4FB 100%);
    border-bottom: 1px solid var(--fos-light-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.fos-secim-kart-aktif .fos-secim-kart-head {
    background: linear-gradient(135deg, rgba(249,115,22,0.06) 0%, rgba(251,191,36,0.04) 100%);
}

.fos-secim-kart-head-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fos-text-primary);
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.fos-secim-kart-body {
    padding: 14px 18px;
    flex: 1;
}

.fos-secim-kart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
}

.fos-secim-kart-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--fos-light-border);
    background: linear-gradient(to bottom, #FAFCFF 0%, #F5F8FD 100%);
}

.fos-secim-aktif-isaret {
    background: var(--fos-accent-grad);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.30);
    white-space: nowrap;
}

/* ============================================================
   YARDIMCI: display:contents — form elemanlarını grid'e dahil eder
   ============================================================ */
.d-contents { display: contents; }

/* ============================================================
   KULLANICI MENÜSÜ — navbar sağ köşe dropdown
   ============================================================ */
.fos-user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.fos-user-menu-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 40px;
    padding: 4px 14px 4px 5px;
    cursor: pointer;
    color: #E2E8F0;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}
.fos-user-menu-btn:hover {
    background: rgba(249,115,22,0.12);
    border-color: rgba(249,115,22,0.35);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.08);
}

/* Küçük avatar — baş harfler */
.fos-user-avatar-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.3px;
    box-shadow: 0 2px 8px rgba(249,115,22,0.40);
}

.fos-user-menu-ad {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #E2E8F0;
}

.fos-user-chevron {
    font-size: 10px;
    opacity: 0.50;
    transition: transform 0.22s ease;
    color: #E2E8F0;
}
.fos-user-menu.acik .fos-user-chevron {
    transform: rotate(180deg);
    opacity: 0.80;
}

/* ── DROPDOWN PANEL ──────────────────────────────────────── */
.fos-user-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 300px;
    /* TAM OPAK — şeffaflık yok */
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow:
        0 4px 6px rgba(0,0,0,0.04),
        0 10px 30px rgba(0,0,0,0.10),
        0 40px 80px rgba(0,0,0,0.08);
    z-index: 9999;
    overflow: clip; /* rounded corners korur, içeriden scroll izin verir */
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.20s ease, transform 0.20s ease;
    /* Kesinlikle opacity inherit etmesin */
    isolation: isolate;
}
.fos-user-menu.acik .fos-user-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Dropdown başlık — kullanıcı bilgisi */
.fos-user-drop-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 14px;
    background: linear-gradient(135deg, #FFF7ED 0%, #FFFBF5 100%);
    border-bottom: 1px solid #F3F4F6;
}
.fos-user-drop-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.5px;
    box-shadow: 0 4px 14px rgba(249,115,22,0.35);
}
.fos-user-drop-adsoyad {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.fos-user-drop-kod {
    font-size: 11px;
    color: #9CA3AF;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    margin-top: 2px;
    letter-spacing: 0.3px;
}

/* Bölüm başlıkları */
.fos-user-drop-section {
    padding: 10px 16px 4px;
}
.fos-user-drop-section-label {
    font-size: 10px;
    font-weight: 700;
    color: #9CA3AF;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.fos-user-drop-divider {
    height: 1px;
    background: #F3F4F6;
    margin: 4px 0;
}

/* Dropdown link item */
.fos-user-drop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
}
.fos-user-drop-item:hover {
    background: #FFF7ED;
    color: #F97316;
    text-decoration: none;
}
.fos-user-drop-item i { font-size: 15px; width: 18px; text-align: center; }

/* ── FUAR SEÇİMİ — dropdown fuar listesi ─────────────────── */
.fos-user-drop-fuarlar {
    padding: 4px 8px 6px;
    max-height: 160px;
    overflow-y: auto;
}
.fos-user-drop-fuar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 12.5px;
}
.fos-user-drop-fuar-btn:hover {
    background: #F9FAFB;
}
.fos-user-drop-fuar-aktif {
    background: #FFF7ED !important;
}
.fos-user-drop-fuar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #D1D5DB;
}
.fos-user-drop-fuar-dot.aktif { background: #22C55E; }
.fos-user-drop-fuar-dot.hazirlik { background: #F59E0B; }
.fos-user-drop-fuar-dot.bitti { background: #94A3B8; }
.fos-user-drop-fuar-kod {
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: #9CA3AF;
    flex-shrink: 0;
}
.fos-user-drop-fuar-adi {
    font-weight: 600;
    color: #111827;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fos-user-drop-fuar-aktif .fos-user-drop-fuar-adi {
    color: #F97316;
}
.fos-user-drop-fuar-aktif .fos-user-drop-fuar-check {
    color: #F97316;
    font-size: 13px;
    flex-shrink: 0;
}
.fos-user-drop-fuar-bos {
    padding: 8px 10px;
    font-size: 12px;
    color: #9CA3AF;
    text-align: center;
}

/* ── DİL SEÇİMİ — svg bayrak butonları ──────────────────── */
.fos-user-drop-diller {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px 10px;
}
.fos-user-drop-dil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    padding: 8px 4px 6px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: #F9FAFB;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.fos-user-drop-dil:hover {
    background: #FFF7ED;
    transform: translateY(-1px);
}
.fos-user-drop-dil.aktif {
    border-color: #F97316;
    background: #FFF7ED;
}
.fos-user-drop-dil-flag {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.fos-user-drop-dil-label {
    font-size: 9px;
    font-weight: 700;
    color: #6B7280;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.fos-user-drop-dil.aktif .fos-user-drop-dil-label {
    color: #F97316;
}

/* ── TEMA TOGGLE ─────────────────────────────────────────── */
.fos-user-drop-tema {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px 10px;
}
.fos-user-drop-tema-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: #F9FAFB;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    transition: all 0.15s;
}
.fos-user-drop-tema-btn:hover {
    background: #FFF7ED;
    color: #F97316;
}
.fos-user-drop-tema-btn.aktif {
    border-color: #F97316;
    background: #FFF7ED;
    color: #F97316;
}
.fos-user-drop-tema-btn i { font-size: 14px; }

/* Çıkış butonu */
.fos-user-drop-cikis {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    color: #EF4444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
}
.fos-user-drop-cikis:hover {
    background: #FEF2F2;
}
.fos-user-drop-cikis i { font-size: 15px; width: 18px; text-align: center; }

/* ============================================================
   PROFİL SAYFASI
   ============================================================ */
.fos-profil-kart {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px 24px;
    text-align: center;
}

/* Avatar çemberi */
.fos-profil-avatar-wrap {
    position: relative;
    margin-bottom: 16px;
}
.fos-profil-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--fos-accent-grad);
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -1px;
    box-shadow: 0 8px 24px rgba(249,115,22,0.35);
    position: relative;
    z-index: 1;
}
.fos-profil-avatar-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: var(--fos-accent-grad);
    opacity: 0.20;
    z-index: 0;
}

/* İsim + rol alanı */
.fos-profil-kimlik { margin-bottom: 8px; }
.fos-profil-adsoyad {
    font-size: 18px;
    font-weight: 800;
    color: var(--fos-text-primary);
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}
.fos-profil-rol {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fos-profil-divider {
    width: 100%;
    height: 1px;
    background: var(--fos-light-border);
    margin: 16px 0;
}

/* ── PROFIL FUAR SEÇİMİ KARTI ────────────────────────────── */
.fos-profil-fuar-liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
}

.fos-profil-fuar-kart {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--fos-light-border);
    background: var(--fos-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fos-profil-fuar-kart:hover {
    border-color: rgba(249,115,22,0.40);
    background: rgba(249,115,22,0.03);
    transform: translateX(3px);
    box-shadow: 0 2px 12px rgba(249,115,22,0.08);
}
.fos-profil-fuar-kart-aktif {
    border-color: var(--fos-accent);
    background: rgba(249,115,22,0.05);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.10);
}

/* Durum noktası */
.fos-profil-fuar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #D1D5DB;
}
.fos-profil-fuar-dot.aktif    { background: #22C55E; box-shadow: 0 0 6px rgba(34,197,94,0.40); }
.fos-profil-fuar-dot.hazirlik { background: #F59E0B; box-shadow: 0 0 6px rgba(245,158,11,0.40); }

/* Fuar bilgi alanı */
.fos-profil-fuar-bilgi {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.fos-profil-fuar-adi {
    font-size: 14px;
    font-weight: 700;
    color: var(--fos-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fos-profil-fuar-kart-aktif .fos-profil-fuar-adi { color: var(--fos-accent); }
.fos-profil-fuar-kod {
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: var(--fos-text-muted);
    letter-spacing: 0.3px;
}

/* Check / ok ikonu */
.fos-profil-fuar-check {
    font-size: 18px;
    color: var(--fos-accent);
    flex-shrink: 0;
}
.fos-profil-fuar-arrow {
    font-size: 13px;
    color: var(--fos-text-muted);
    flex-shrink: 0;
    opacity: 0.5;
}

/* Boş durum */
.fos-profil-fuar-bos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    color: var(--fos-text-muted);
    font-size: 13px;
}
.fos-profil-fuar-bos i { font-size: 18px; opacity: 0.4; }

/* Dark mode */
body.fos-dark .fos-profil-fuar-kart {
    background: var(--fos-surface);
    border-color: var(--fos-light-border);
}
body.fos-dark .fos-profil-fuar-kart:hover {
    background: rgba(249,115,22,0.06);
}
body.fos-dark .fos-profil-fuar-kart-aktif {
    background: rgba(249,115,22,0.08);
}

/* Bilgi satırları */
.fos-profil-bilgi-liste {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.fos-profil-bilgi-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}
.fos-profil-bilgi-etiket {
    color: var(--fos-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.fos-profil-bilgi-etiket i { font-size: 14px; }
.fos-profil-bilgi-deger {
    color: var(--fos-text-primary);
    font-weight: 600;
    text-align: right;
}

/* ============================================================
   DİL SEÇİM KARTI (profil sayfası)
   ============================================================ */
.fos-dil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    padding: 20px;
}

.fos-dil-kart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px;
    border-radius: 12px;
    border: 2px solid var(--fos-light-border);
    background: var(--fos-surface);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
    position: relative;
    text-align: center;
    width: 100%;
}
.fos-dil-kart:hover {
    border-color: rgba(249,115,22,0.40);
    background: rgba(249,115,22,0.04);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249,115,22,0.12);
}
.fos-dil-kart-aktif {
    border-color: var(--fos-accent);
    background: rgba(249,115,22,0.06);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}
/* Profil sayfası — SVG bayrak resmi */
.fos-dil-bayrak-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.fos-dil-ad {
    font-size: 14px;
    font-weight: 700;
    color: var(--fos-text-primary);
}
.fos-dil-sub {
    font-size: 11px;
    color: var(--fos-text-muted);
}
.fos-dil-aktif-isaret {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--fos-accent);
    font-size: 16px;
    line-height: 1;
}

/* ============================================================
   TEMA SEÇİM KARTI (profil sayfası)
   ============================================================ */
.fos-tema-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px;
}

.fos-tema-kart {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    border: 2px solid var(--fos-light-border);
    background: var(--fos-surface);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
    position: relative;
    width: 100%;
    text-align: left;
}
.fos-tema-kart:hover {
    border-color: rgba(249,115,22,0.40);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249,115,22,0.12);
}
.fos-tema-kart-aktif {
    border-color: var(--fos-accent);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}

.fos-tema-kart-light { background: #FAFCFF; }
.fos-tema-kart-dark  { background: #0F172A; }
.fos-tema-kart-dark .fos-tema-kart-ad  { color: #F1F5F9; }
.fos-tema-kart-dark .fos-tema-kart-sub { color: #94A3B8; }
.fos-tema-kart-dark .fos-tema-kart-ikon { color: #F1F5F9; }

.fos-tema-kart-onizleme {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(249,115,22,0.10);
}
.fos-tema-kart-ikon { font-size: 22px; color: var(--fos-accent); }

.fos-tema-kart-bilgi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.fos-tema-kart-ad {
    font-size: 14px;
    font-weight: 700;
    color: var(--fos-text-primary);
}
.fos-tema-kart-sub {
    font-size: 11px;
    color: var(--fos-text-muted);
}

.fos-tema-aktif-isaret {
    font-size: 18px;
    color: var(--fos-accent);
    flex-shrink: 0;
}

/* ── EMPTY STATE — Kayıt Yok Durumu ─────────────────────── */
/* Card benzeri container, ortalanmış ikon + metin + buton   */
.fos-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg);
    box-shadow: inset 3px 0 0 var(--fos-orange), var(--fos-shadow);
    margin-bottom: 18px;
}
/* İkon — büyük, subtle arka plan dairesi */
.fos-empty-state > i,
.fos-empty-state > .fos-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--fos-orange-muted);
    color: var(--fos-orange);
    font-size: 28px;
    margin-bottom: 16px;
}
/* Başlık metni */
.fos-empty-state > h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--fos-text-primary);
    margin-bottom: 6px;
}
/* Açıklama metni */
.fos-empty-state > p {
    font-size: 13px;
    color: var(--fos-text-muted);
    max-width: 360px;
    line-height: 1.5;
    margin-bottom: 16px;
}
/* Buton — zaten fos-btn class'ı ile gelir, sadece margin */
.fos-empty-state > .fos-btn {
    margin-top: 4px;
}
/* Küçük versiyon — inline veya card-body içinde */
.fos-empty-state.fos-empty-sm {
    padding: 24px 16px;
    border: none;
    box-shadow: none;
    background: transparent;
}
.fos-empty-state.fos-empty-sm > i,
.fos-empty-state.fos-empty-sm > .fos-empty-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
    margin-bottom: 10px;
}
.fos-empty-state.fos-empty-sm > p {
    font-size: 12.5px;
    margin-bottom: 10px;
}

/* ── Yetkisiz Erişim Sayfası ── */
/* Sayfanın ortasına hizalar — tam ekran yükseklikte dikey ortalama */
.fos-yetkisiz-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 220px);
}
/* İçerideki empty-state genişliği — dar tutarak odaklı görüntü */
.fos-yetkisiz-wrap .fos-empty-state {
    max-width: 480px;
    padding: 56px 40px;
}
/* İkon — kırmızımsı ton (uyarı/tehlike hissi) */
.fos-yetkisiz-wrap .fos-empty-state > i {
    background: rgba(239, 68, 68, 0.10);
    color: #EF4444;
    width: 80px;
    height: 80px;
    font-size: 32px;
}
/* Açıklama metni biraz geniş — uzun cümle rahat okusun */
.fos-yetkisiz-wrap .fos-empty-state > p {
    max-width: 420px;
}
/* Dark — Yetkisiz ikon */
body.fos-dark .fos-yetkisiz-wrap .fos-empty-state > i {
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
}
/* Mobile — Yetkisiz */
@media (max-width: 768px) {
    .fos-yetkisiz-wrap {
        min-height: calc(100vh - 160px);
    }
    .fos-yetkisiz-wrap .fos-empty-state {
        padding: 36px 20px;
        max-width: 100%;
    }
    .fos-yetkisiz-wrap .fos-empty-state > i {
        width: 64px;
        height: 64px;
        font-size: 26px;
    }
}

/* ── Dashboard Rol Kartı ─────────────────────────────────── */
/* Her yetki seviyesinin dashboard'unda gösterilen büyük bilgi kartı */
.fos-dash-role-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 220px);
}
.fos-dash-role-card {
    max-width: 520px;
    padding: 56px 48px;
}
/* Rol ikonu — büyük, yuvarlak zemin */
.fos-dash-role-icon {
    width: 88px !important;
    height: 88px !important;
    font-size: 36px !important;
    margin-bottom: 20px !important;
}
/* Rol badge — seviye numarası ile */
.fos-dash-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 16px;
}
/* Seviye numarası — daire içinde */
.fos-dash-role-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    background: rgba(255,255,255,0.25);
    color: inherit;
}
/* Açıklama — geniş */
.fos-dash-role-card > p {
    max-width: 440px !important;
}

/* ── Seviyeye özel renkler ─────────────────── */
/* 1 — Yazılım: mor/indigo */
.fos-dash-role-icon-1 { background: rgba(99,102,241,0.10) !important; color: #6366F1 !important; }
.fos-dash-role-badge-1 { background: #6366F1; color: #fff; }
/* 2 — Fuar Sahibi: koyu mavi */
.fos-dash-role-icon-2 { background: rgba(59,130,246,0.10) !important; color: #3B82F6 !important; }
.fos-dash-role-badge-2 { background: #3B82F6; color: #fff; }
/* 3 — Fuar Personeli: turuncu (FuarOS accent) */
.fos-dash-role-icon-3 { background: rgba(249,115,22,0.10) !important; color: #F97316 !important; }
.fos-dash-role-badge-3 { background: #F97316; color: #fff; }
/* 4 — Org Firması: yeşil */
.fos-dash-role-icon-4 { background: rgba(16,185,129,0.10) !important; color: #10B981 !important; }
.fos-dash-role-badge-4 { background: #10B981; color: #fff; }
/* 5 — Org Personeli: teal */
.fos-dash-role-icon-5 { background: rgba(20,184,166,0.10) !important; color: #14B8A6 !important; }
.fos-dash-role-badge-5 { background: #14B8A6; color: #fff; }
/* 6 — Katılımcı: amber/sarı */
.fos-dash-role-icon-6 { background: rgba(245,158,11,0.10) !important; color: #F59E0B !important; }
.fos-dash-role-badge-6 { background: #F59E0B; color: #fff; }
/* 7 — Müşteri: slate/gri */
.fos-dash-role-icon-7 { background: rgba(100,116,139,0.10) !important; color: #64748B !important; }
.fos-dash-role-badge-7 { background: #64748B; color: #fff; }

/* Dark — rol kartı ikon renkleri (daha parlak) */
body.fos-dark .fos-dash-role-icon-1 { background: rgba(99,102,241,0.18) !important; }
body.fos-dark .fos-dash-role-icon-2 { background: rgba(59,130,246,0.18) !important; }
body.fos-dark .fos-dash-role-icon-3 { background: rgba(249,115,22,0.18) !important; }
body.fos-dark .fos-dash-role-icon-4 { background: rgba(16,185,129,0.18) !important; }
body.fos-dark .fos-dash-role-icon-5 { background: rgba(20,184,166,0.18) !important; }
body.fos-dark .fos-dash-role-icon-6 { background: rgba(245,158,11,0.18) !important; }
body.fos-dark .fos-dash-role-icon-7 { background: rgba(100,116,139,0.18) !important; }

/* Mobile — rol kartı */
@media (max-width: 768px) {
    .fos-dash-role-wrap { min-height: calc(100vh - 160px); }
    .fos-dash-role-card { padding: 36px 20px; max-width: 100%; }
    .fos-dash-role-icon { width: 68px !important; height: 68px !important; font-size: 28px !important; }
}

/* ── Dark — Empty State ── */
body.fos-dark .fos-empty-state {
    background: var(--fos-surface, #111827);
    border-color: var(--fos-light-border, rgba(255,255,255,0.08));
    box-shadow: inset 3px 0 0 #F97316, 0 1px 3px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.20);
}
body.fos-dark .fos-empty-state > i,
body.fos-dark .fos-empty-state > .fos-empty-icon {
    background: rgba(249, 115, 22, 0.12);
}
body.fos-dark .fos-empty-state > h3 {
    color: var(--fos-text-primary, #F1F5F9);
}
body.fos-dark .fos-empty-state > p {
    color: var(--fos-text-muted, #64748B);
}

/* ── Mobile — Empty State ── */
@media (max-width: 768px) {
    .fos-empty-state {
        padding: 32px 16px;
    }
    .fos-empty-state > i,
    .fos-empty-state > .fos-empty-icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
        margin-bottom: 12px;
    }
    .fos-empty-state > h3 {
        font-size: 14px;
    }
    .fos-empty-state > p {
        font-size: 12px;
    }
}

/* ============================================================
   DARK MODE — body.fos-dark CSS değişken override'ları
   ============================================================ */
body.fos-dark {
    --fos-bg:           #0B1120;
    --fos-surface:      #111827;
    --fos-surface-alt:  #1A2235;
    --fos-light-border: rgba(255,255,255,0.08);
    --fos-text-primary: #F1F5F9;
    --fos-text-secondary: #94A3B8;
    --fos-text-muted:   #64748B;
}
/* Dark — body arka planı (fos-body dot-grid light kalıyor, override şart) */
body.fos-dark.fos-body {
    background-color: var(--fos-bg);
    background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
}

body.fos-dark .fos-content {
    background: var(--fos-bg);
}

body.fos-dark .fos-card {
    background: var(--fos-surface);
    border-color: var(--fos-light-border);
    box-shadow: inset 3px 0 0 #F97316, 0 1px 3px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.20);
}

body.fos-dark .fos-card-header {
    background: var(--fos-surface-alt);
    border-color: var(--fos-light-border);
}

body.fos-dark .fos-tablo thead th {
    background: var(--fos-surface-alt);
    color: var(--fos-text-muted);
    border-color: var(--fos-light-border);
}

body.fos-dark .fos-tablo td {
    border-color: var(--fos-light-border);
    color: var(--fos-text-secondary);
}

body.fos-dark .fos-tablo tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}

body.fos-dark .fos-tablo tbody tr:hover {
    background: rgba(249,115,22,0.06);
}

body.fos-dark .fos-input,
body.fos-dark .fos-select,
body.fos-dark .fos-textarea {
    background: var(--fos-surface-alt);
    border-color: var(--fos-light-border);
    color: var(--fos-text-primary);
}

body.fos-dark .fos-input:focus,
body.fos-dark .fos-select:focus,
body.fos-dark .fos-textarea:focus {
    border-color: var(--fos-accent);
    background: var(--fos-surface);
}

body.fos-dark .fos-user-dropdown {
    background: #1A2235;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 4px 6px rgba(0,0,0,0.20), 0 20px 60px rgba(0,0,0,0.50);
}
body.fos-dark .fos-user-drop-head {
    background: linear-gradient(135deg, rgba(249,115,22,0.12) 0%, rgba(249,115,22,0.06) 100%);
    border-color: rgba(255,255,255,0.06);
}
body.fos-dark .fos-user-drop-adsoyad { color: #F1F5F9; }
body.fos-dark .fos-user-drop-divider { background: rgba(255,255,255,0.06); }
body.fos-dark .fos-user-drop-section-label { color: #64748B; }
body.fos-dark .fos-user-drop-item { color: #CBD5E1; }
body.fos-dark .fos-user-drop-item:hover { background: rgba(249,115,22,0.10); color: #FB923C; }
body.fos-dark .fos-user-drop-fuar-btn:hover { background: rgba(255,255,255,0.04); }
body.fos-dark .fos-user-drop-fuar-aktif { background: rgba(249,115,22,0.10) !important; }
body.fos-dark .fos-user-drop-fuar-adi { color: #E2E8F0; }
body.fos-dark .fos-user-drop-fuar-bos { color: #64748B; }
body.fos-dark .fos-user-drop-dil { background: rgba(255,255,255,0.04); }
body.fos-dark .fos-user-drop-dil:hover { background: rgba(249,115,22,0.10); }
body.fos-dark .fos-user-drop-dil.aktif { background: rgba(249,115,22,0.15); border-color: #F97316; }
body.fos-dark .fos-user-drop-dil-label { color: #64748B; }
body.fos-dark .fos-user-drop-tema-btn { background: rgba(255,255,255,0.04); color: #64748B; }
body.fos-dark .fos-user-drop-tema-btn:hover { background: rgba(249,115,22,0.10); color: #FB923C; }
body.fos-dark .fos-user-drop-tema-btn.aktif { background: rgba(249,115,22,0.15); border-color: #F97316; color: #FB923C; }
body.fos-dark .fos-user-drop-cikis:hover { background: rgba(239,68,68,0.10); }

body.fos-dark .fos-dil-kart {
    background: var(--fos-surface);
    border-color: var(--fos-light-border);
}

body.fos-dark .fos-dil-kart:hover {
    background: rgba(249,115,22,0.06);
}

body.fos-dark .fos-tema-kart-light {
    background: #1A2235;
}

body.fos-dark .fos-profil-bilgi-satir {
    border-color: var(--fos-light-border);
}

body.fos-dark .fos-footer {
    background: var(--fos-surface);
    border-color: var(--fos-light-border);
    color: var(--fos-text-muted);
}

/* ============================================================
   RTL DESTEĞI — Arapça (dir="rtl") layout ayna görüntüsü
   html[dir="rtl"] selektörü — tüm yön bağımlı kuralları override eder
   ============================================================ */

/* Navbar: logo solda kalır, toggle sağa geçer */
html[dir="rtl"] .fos-navbar { flex-direction: row-reverse; padding: 0 0 0 20px; }
html[dir="rtl"] .fos-navbar-left { border-right: none; border-left: 1px solid rgba(255,255,255,0.06); flex-direction: row-reverse; }

/* Sidebar: sağdan açılır */
html[dir="rtl"] .fos-sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--fos-dark-border); }
html[dir="rtl"] .fos-main-wrapper { margin-left: 0; margin-right: var(--fos-sidebar-w); }
html[dir="rtl"] .fos-main-wrapper.tam-genislik { margin-right: 0; }
html[dir="rtl"] .fos-sidebar.kapali { transform: translateX(100%); }
html[dir="rtl"] .fos-sidebar.acik  { transform: translateX(0); }
html[dir="rtl"] .fos-footer { margin-left: 0; margin-right: var(--fos-sidebar-w); }
html[dir="rtl"] .fos-footer.tam-genislik { margin-right: 0; }

/* Sidebar aktif item: sol çizgi sağa geçer */
html[dir="rtl"] .fos-sidebar-item.active {
    box-shadow: inset -3px 0 0 #F97316, 0 0 20px rgba(249,115,22,0.08);
}
html[dir="rtl"] .fos-sidebar-item.active i {
    filter: drop-shadow(0 0 6px rgba(249,115,22,0.50));
}

/* Navbar sağ grup: RTL'de margin yönü ters */
html[dir="rtl"] .fos-navbar-right { margin-left: 0; margin-right: auto; }

/* Kullanıcı dropdown: soldan açılır, ekran dışına taşmaz */
html[dir="rtl"] .fos-user-dropdown { right: auto; left: 0; max-width: calc(100vw - 24px); }

/* Genel metin hizalaması */
html[dir="rtl"] .fos-page-title,
html[dir="rtl"] .fos-card-title,
html[dir="rtl"] .fos-profil-bilgi-etiket,
html[dir="rtl"] .fos-user-drop-item,
html[dir="rtl"] .fos-user-drop-cikis { text-align: right; flex-direction: row-reverse; }

/* Tablo: başlıklar ve hücreler sağ hizalı */
html[dir="rtl"] .fos-tablo th,
html[dir="rtl"] .fos-tablo td { text-align: right; }
html[dir="rtl"] .fos-tablo thead th:first-child { border-radius: 0 10px 10px 0; }
html[dir="rtl"] .fos-tablo thead th:last-child  { border-radius: 10px 0 0 10px; }

/* Sidebar item icon boşluğu */
html[dir="rtl"] .fos-sidebar-item { flex-direction: row-reverse; }

/* Alert: icon sağda */
html[dir="rtl"] .fos-alert { flex-direction: row-reverse; text-align: right; }

/* Fuar hover animi: soldan sağa yerine sağdan sola */
html[dir="rtl"] .fos-profil-fuar-kart:hover { transform: translateX(-3px); }

/* Form etiket + input düzeni */
html[dir="rtl"] .fos-form-group label { text-align: right; }
html[dir="rtl"] .fos-input,
html[dir="rtl"] .fos-select,
html[dir="rtl"] .fos-textarea { text-align: right; direction: rtl; }

/* ============================================================
   DASHBOARD — KPI kartları ve grafik konteynerleri
   ============================================================ */

/* KPI kart ızgarası — 3 sütun, boşluklu */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 991px) {
  /* Tablet: 2 sütun */
  .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  /* Mobil: 1 sütun */
  .dash-kpi-grid { grid-template-columns: 1fr; }
}

/* Tek KPI kart kutusu */
.dash-kpi-card {
  border-radius: 14px;
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  transition: transform .18s, box-shadow .18s;
}
.dash-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Renkli varyantlar */
.dash-kpi-blue   { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-left: 4px solid #6366f1; }
.dash-kpi-green  { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-left: 4px solid #10b981; }
.dash-kpi-orange { background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%); border-left: 4px solid #f97316; }
.dash-kpi-purple { background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%); border-left: 4px solid #a855f7; }
.dash-kpi-yellow { background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%); border-left: 4px solid #eab308; }
.dash-kpi-teal   { background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%); border-left: 4px solid #14b8a6; }

/* İkon dairesi */
.dash-kpi-icon {
  font-size: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.65);
  flex-shrink: 0;
}
.dash-kpi-blue   .dash-kpi-icon { color: #6366f1; }
.dash-kpi-green  .dash-kpi-icon { color: #10b981; }
.dash-kpi-orange .dash-kpi-icon { color: #f97316; }
.dash-kpi-purple .dash-kpi-icon { color: #a855f7; }
.dash-kpi-yellow .dash-kpi-icon { color: #eab308; }
.dash-kpi-teal   .dash-kpi-icon { color: #14b8a6; }

/* Etiket + değer bloğu */
.dash-kpi-body {
  flex: 1;
  min-width: 0;
}
.dash-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-kpi-val {
  font-size: 26px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
  margin-top: 4px;
}

/* Sağ-üst ok linki */
.dash-kpi-link {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 18px;
  color: rgba(0,0,0,.18);
  transition: color .15s;
  text-decoration: none;
}
.dash-kpi-card:hover .dash-kpi-link { color: rgba(0,0,0,.45); }

/* Grafik satırı — geniş + dar sütun yan yana */
.dash-chart-row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1199px) {
  /* Tablet: tek sütun */
  .dash-chart-row { grid-template-columns: 1fr; }
}

/* Geniş sütun: iki kart üst üste */
.dash-chart-col-wide  { display: flex; flex-direction: column; gap: 16px; }
/* Dar sütun: iki kart üst üste */
.dash-chart-col-narrow { display: flex; flex-direction: column; gap: 16px; }

/* Grafik kart başlığı */
.dash-chart-card { padding: 16px 18px; }
.dash-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fos-border, #e5e7eb);
}
.dash-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ApexCharts konteyner boyutları */
.dash-chart-area { min-height: 220px; }
.dash-chart-pie  { min-height: 220px; }

/* ============================================================
   BREADCRUMB — Cari > Firma > Personel vb.
   ============================================================ */
.fos-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
}
.fos-breadcrumb a {
  color: #6366f1;
  text-decoration: none;
  font-weight: 500;
}
.fos-breadcrumb a:hover { text-decoration: underline; }
.fos-breadcrumb-sep { color: #cbd5e1; margin: 0 2px; }
.fos-breadcrumb-current { color: #374151; font-weight: 600; }

/* ============================================================
   YARDIMCI — sık kullanılan margin/padding kısaltmaları
   ============================================================ */
.fos-mb-16 { margin-bottom: 16px; }
.fos-p-16  { padding: 16px; }

/* fos-btn-info rengi — CariPersonel/Personel butonu için */
.fos-btn-info {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.fos-btn-info:hover {
  background: #bfdbfe;
  color: #1e40af;
}

/* ============================================================
   AUTOCOMPLETE — Cari arama dropdown bileşeni
   Kullanım: Sozlesme, OtelOneri, OdemeKalemi formlarında
   ============================================================ */
.fos-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
}
/* Her sonuç satırı */
.fos-autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
}
.fos-autocomplete-item:last-child { border-bottom: none; }
.fos-autocomplete-item:hover { background: #fff7ed; }
/* Firma unvanı */
.fos-autocomplete-unvan {
  font-size: 13px;
  color: #1e293b;
  font-weight: 500;
}
/* Cari kodu — sağda küçük badge gibi */
.fos-autocomplete-kod {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  white-space: nowrap;
}

/* ============================================================
   CARİ SEÇ — _CariSec.cshtml modal bileşeni
   ============================================================ */

/* Seçim alanı wrapper */
.fos-cari-sec-wrap { position: relative; }

/* Tıklanabilir seçim kutusu */
.fos-cari-sec-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  min-height: 42px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  gap: 8px;
}
.fos-cari-sec-field:hover { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,0.10); }

/* İçerik alanı */
.fos-cari-sec-display { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }

/* Placeholder — seçilmedi */
.fos-cari-sec-placeholder { display: flex; align-items: center; gap: 6px; color: #94a3b8; font-size: 13px; }
.fos-cari-sec-placeholder i { font-size: 13px; }

/* Seçilmiş firma unvanı */
.fos-cari-sec-unvan { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

/* Seçilmiş firma kodu */
.fos-cari-sec-kod { font-size: 11px; color: #64748b; background: #f1f5f9; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }

/* Temizle butonu */
.fos-cari-sec-temizle { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 2px 4px; border-radius: 4px; line-height: 1; display: flex; align-items: center; }
.fos-cari-sec-temizle:hover { color: #ef4444; background: #fee2e2; }

/* Chevron ikonu */
.fos-cari-sec-chevron { color: #94a3b8; font-size: 12px; flex-shrink: 0; transition: transform 0.2s; }

/* ── Modal Backdrop ── */
.fos-cari-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(2px);
  z-index: 1200;
}

/* ── Modal Panel ── */
.fos-cari-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 95vw);
  max-height: 80vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modal başlık */
.fos-cari-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.fos-cari-modal-title { font-size: 15px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; }
.fos-cari-modal-title i { color: #f97316; font-size: 16px; }
.fos-cari-modal-kapat { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; font-size: 14px; }
.fos-cari-modal-kapat:hover { background: #f1f5f9; color: #374151; }

/* Arama kutusu */
.fos-cari-modal-ara {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
  position: relative;
}
.fos-cari-modal-ara-ico { color: #94a3b8; font-size: 15px; flex-shrink: 0; }
.fos-cari-modal-ara-input {
  flex: 1; border: none; outline: none;
  font-size: 15px; color: #1e293b;
  background: transparent;
  padding: 4px 0;
}
.fos-cari-modal-ara-input::placeholder { color: #cbd5e1; }
.fos-cari-modal-ara-temizle { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; border-radius: 50%; display: flex; align-items: center; }
.fos-cari-modal-ara-temizle:hover { background: #f1f5f9; color: #374151; }

/* Tip filtre pilleri */
.fos-cari-modal-filtreler {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.fos-cari-filtre-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #f8fafc; color: #64748b;
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: all 0.15s;
}
.fos-cari-filtre-pill:hover { border-color: #f97316; color: #f97316; background: #fff7ed; }
.fos-cari-filtre-pill.active { border-color: #f97316; color: #fff; background: #f97316; }
.fos-cari-filtre-pill i { font-size: 11px; }

/* Sonuç alanı */
.fos-cari-modal-sonuclar { flex: 1; overflow-y: auto; padding: 12px 20px 16px; min-height: 120px; }

/* Hint / Loading / Boş durumlar */
.fos-cari-modal-hint,
.fos-cari-modal-loading,
.fos-cari-modal-bos {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 40px 20px;
  color: #94a3b8; font-size: 13px; text-align: center;
}
.fos-cari-modal-hint i,
.fos-cari-modal-bos i { font-size: 32px; opacity: 0.5; }

/* Spinner */
.fos-spinner {
  width: 28px; height: 28px;
  border: 3px solid #f1f5f9;
  border-top-color: #f97316;
  border-radius: 50%;
  animation: fosSpinAnim 0.7s linear infinite;
}
@keyframes fosSpinAnim { to { transform: rotate(360deg); } }

/* Kart grid */
.fos-cari-kart-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 500px) { .fos-cari-kart-liste { grid-template-columns: 1fr; } }

/* Firma kartı */
.fos-cari-kart {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}
.fos-cari-kart:hover {
  border-color: #f97316;
  background: #fff7ed;
  box-shadow: 0 2px 12px rgba(249,115,22,0.12);
  transform: translateY(-1px);
}
.fos-cari-kart-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.fos-cari-kart-unvan { font-size: 13px; font-weight: 600; color: #1e293b; line-height: 1.35; }
.fos-cari-kart-sehir { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #64748b; white-space: nowrap; flex-shrink: 0; }
.fos-cari-kart-sehir i { font-size: 10px; }
.fos-cari-kart-alt { display: flex; align-items: center; gap: 6px; }
.fos-cari-kart-kod { font-size: 11px; color: #64748b; background: #f1f5f9; padding: 2px 7px; border-radius: 4px; }
.fos-cari-kart-tip { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.3px; }
/* Tip renkleri */
.fos-cari-tip-1 { background: #dbeafe; color: #1d4ed8; }
.fos-cari-tip-2 { background: #d1fae5; color: #065f46; }
.fos-cari-tip-3 { background: #fef3c7; color: #92400e; }
.fos-cari-tip-4 { background: #ede9fe; color: #5b21b6; }
.fos-cari-tip-5 { background: #fce7f3; color: #9d174d; }

/* ============================================================
   PDF / DOSYA UPLOAD — fos-file-upload-wrap
   ============================================================ */
.fos-file-upload-wrap { position: relative; }
.fos-file-input { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; z-index: -1; }
.fos-file-label {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border: 2px dashed #e2e8f0;
  border-radius: 8px; cursor: pointer; color: #64748b;
  font-size: 13px; transition: all 0.15s; background: #f8fafc;
}
.fos-file-label i { font-size: 18px; color: #f97316; }
.fos-file-label:hover { border-color: #f97316; background: #fff7ed; color: #f97316; }

/* ============================================================
   NO-SHOW & ATTRİTİON — bilgi çubuğu (Sözleşme/Duzenle)
   ============================================================ */
/* Yatay bilgi çubuğu — blok boyutu / geceleme / attrition hesabı */
.soz-noshow-bilgi-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 4px;
}
/* Her bir veri birimi — sayı + etiket dikey */
.soz-noshow-bilgi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 16px;
    min-width: 80px;
}
.soz-noshow-bilgi-sayi {
    font-size: 20px;
    font-weight: 800;
    color: #1e40af;
    line-height: 1.1;
}
.soz-noshow-bilgi-etiket {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    text-align: center;
}
/* Ayraç */
.soz-noshow-bilgi-sep {
    width: 1px;
    height: 32px;
    background: #bfdbfe;
    margin: 0 4px;
    flex-shrink: 0;
}
/* Min kullanım — yeşil ton */
.soz-noshow-bilgi-hesap .soz-noshow-bilgi-sayi { color: #15803d; }
.soz-noshow-bilgi-hesap .soz-noshow-bilgi-etiket { color: #15803d; }
/* Serbest oda — turuncu ton */
.soz-noshow-bilgi-serbest .soz-noshow-bilgi-sayi { color: #ea580c; }
.soz-noshow-bilgi-serbest .soz-noshow-bilgi-etiket { color: #ea580c; }
/* Dark mode */
body.fos-dark .soz-noshow-bilgi-bar {
    background: linear-gradient(135deg, rgba(30,64,175,0.12) 0%, rgba(21,128,61,0.08) 100%);
    border-color: rgba(147,197,253,0.25);
}
body.fos-dark .soz-noshow-bilgi-sayi { color: #93c5fd; }
body.fos-dark .soz-noshow-bilgi-etiket { color: #94a3b8; }
body.fos-dark .soz-noshow-bilgi-sep { background: rgba(147,197,253,0.2); }
body.fos-dark .soz-noshow-bilgi-hesap .soz-noshow-bilgi-sayi { color: #86efac; }
body.fos-dark .soz-noshow-bilgi-hesap .soz-noshow-bilgi-etiket { color: #86efac; }
body.fos-dark .soz-noshow-bilgi-serbest .soz-noshow-bilgi-sayi { color: #fb923c; }
body.fos-dark .soz-noshow-bilgi-serbest .soz-noshow-bilgi-etiket { color: #fb923c; }
/* Mobile */
@media (max-width: 768px) {
    .soz-noshow-bilgi-item { padding: 4px 10px; min-width: 60px; }
    .soz-noshow-bilgi-sayi { font-size: 16px; }
}

/* ============================================================
   CARD HEAD — başlık + badge
   ============================================================ */
.fos-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fos-card-title { font-size: 13px; font-weight: 700; color: #374151; }
.fos-mt-4 { margin-top: 4px; }
.fos-mt-6 { margin-top: 6px; }
.fos-mt-8 { margin-top: 8px; }
.fos-mb-4 { margin-bottom: 4px; }
.fos-mb-6 { margin-bottom: 6px; }
.fos-mb-8 { margin-bottom: 8px; }
.fos-mb-10 { margin-bottom: 10px; }
.fos-mb-12 { margin-bottom: 12px; }
.fos-pt-8 { padding-top: 8px; }
.fos-fw-700 { font-weight: 700 !important; }
.fos-fs-14 { font-size: 14px !important; }
.fos-fs-16 { font-size: 16px !important; }
.fos-fs-18 { font-size: 18px !important; }
.fos-fs-22 { font-size: 22px !important; }
.fos-fs-24 { font-size: 24px !important; }
.fos-text-center { text-align: center !important; }
.fos-empty-sm { padding: 20px !important; }

/* ============================================================
   KURAL 14 — DARK MODE: page-header, card, table, FS-* bileşenler
   ============================================================ */

/* Page header */
body.fos-dark .fos-page-header {
    background: var(--fos-surface);
    border-color: var(--fos-light-border);
    box-shadow: inset 3px 0 0 #F97316, 0 1px 4px rgba(0,0,0,0.30);
}
body.fos-dark .fos-page-title {
    color: var(--fos-text-primary);
}

/* Card güncellemesi */
body.fos-dark .fos-card-title {
    color: var(--fos-text-primary);
}
body.fos-dark .fos-card-header {
    background: linear-gradient(135deg, rgba(249,115,22,0.06) 0%, transparent 60%);
}

/* Table wrap */
body.fos-dark .fos-table-wrap {
    background: var(--fos-surface);
    border-color: var(--fos-light-border);
    box-shadow: inset 3px 0 0 #F97316, 0 1px 4px rgba(0,0,0,0.30);
}
body.fos-dark .fos-table thead tr:first-child {
    background: var(--fos-surface-alt);
}
body.fos-dark .fos-table thead th {
    color: var(--fos-text-muted);
    background: var(--fos-surface-alt);
}
body.fos-dark .fos-table tbody tr {
    border-color: rgba(255,255,255,0.05);
}
body.fos-dark .fos-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}
body.fos-dark .fos-table tbody tr:hover {
    background: rgba(249,115,22,0.06) !important;
}
body.fos-dark .fos-table td {
    color: var(--fos-text-secondary);
}

/* FS-* FosTable bileşenleri — dark mode */
/* FS-wrap — dark mode */
body.fos-dark .FS-wrap {
    background: var(--fos-surface);
    border-color: var(--fos-light-border);
    box-shadow: inset 3px 0 0 #F97316, 0 1px 4px rgba(0,0,0,0.30);
}
body.fos-dark .FS-bar {
    background: var(--fos-surface);
    border-color: var(--fos-light-border);
}
body.fos-dark .FS-modes {
    background: var(--fos-surface-alt);
    border-color: var(--fos-light-border);
}
body.fos-dark .FS-modes button {
    background: var(--fos-surface-alt);
    color: var(--fos-text-muted);
}
body.fos-dark .FS-modes button.on {
    background: var(--fos-orange);
    color: #fff;
}
body.fos-dark .FS-search input {
    background: var(--fos-surface-alt);
    border-color: var(--fos-light-border);
    color: var(--fos-text-primary);
}
body.fos-dark .FS-ps {
    background: var(--fos-surface-alt);
    border-color: var(--fos-light-border);
    color: var(--fos-text-primary);
}
body.fos-dark .FS-count { color: var(--fos-text-muted); }
body.fos-dark .FS-count b { color: var(--fos-text-primary); }

body.fos-dark .FS-col-search th {
    background: var(--fos-surface-alt);
    border-color: var(--fos-light-border);
}
body.fos-dark .FS-col-inp {
    background: var(--fos-surface);
    border-color: rgba(255,255,255,0.08);
    color: var(--fos-text-primary);
}

body.fos-dark .FS-panel {
    background: rgba(249, 115, 22, 0.04);
    border-color: var(--fos-light-border);
}
body.fos-dark .FS-chip {
    background: var(--fos-surface-alt);
    border-color: var(--fos-light-border);
    color: var(--fos-text-muted);
}
body.fos-dark .FS-chip.on {
    background: rgba(249,115,22,0.15);
    border-color: var(--fos-orange);
    color: var(--fos-orange);
}

body.fos-dark .FS-content-nav {
    background: var(--fos-surface-alt);
    border-color: var(--fos-light-border);
}
body.fos-dark .FS-content-nav button {
    border-color: var(--fos-light-border);
    color: var(--fos-text-primary);
}
body.fos-dark .FS-content-title { color: var(--fos-text-primary); }

body.fos-dark .FS-pivot-group {
    background: rgba(249,115,22,0.06);
}
body.fos-dark .FS-pivot-group:hover {
    background: rgba(249,115,22,0.10) !important;
}

body.fos-dark .FS-pg {
    background: var(--fos-surface);
    border-color: var(--fos-light-border);
    color: var(--fos-text-primary);
}
body.fos-dark .FS-pg.on {
    background: var(--fos-orange);
    border-color: var(--fos-orange);
    color: #fff;
}

body.fos-dark .FS-pager { color: var(--fos-text-muted); }

/* İkon butonlar — dark mode */
body.fos-dark .fos-btn-icon {
    border-color: rgba(255,255,255,0.10);
    color: var(--fos-text-muted);
    background: transparent;
}
body.fos-dark .fos-btn-icon.fos-icon-edit:hover {
    border-color: var(--fos-orange);
    color: var(--fos-orange);
    background: rgba(249, 115, 22, 0.10);
}
body.fos-dark .fos-btn-icon.fos-icon-delete:hover {
    border-color: #EF4444;
    color: #EF4444;
    background: rgba(239, 68, 68, 0.10);
}

/* Thead gradient — dark mode */
body.fos-dark .fos-table thead tr:first-child {
    background: linear-gradient(180deg, var(--fos-surface-alt) 0%, var(--fos-surface) 100%);
    border-bottom-color: rgba(255,255,255,0.08);
}

/* Sütun arama — dark mode */
body.fos-dark .FS-col-search th {
    background: var(--fos-surface);
}
body.fos-dark .FS-col-inp {
    background: var(--fos-surface-alt);
    border-color: rgba(255,255,255,0.08);
    color: var(--fos-text-primary);
}
body.fos-dark .FS-col-inp:focus {
    border-color: var(--fos-orange);
    background: var(--fos-surface);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.12);
}

/* Footer — dark mode */
body.fos-dark .FS-footer {
    background: var(--fos-surface);
    border-color: var(--fos-light-border);
}
body.fos-dark .FS-export-btn {
    background: var(--fos-surface-alt);
    border-color: rgba(255,255,255,0.08);
    color: var(--fos-text-muted);
}
body.fos-dark .FS-export-btn:hover {
    border-color: var(--fos-orange);
    color: var(--fos-orange);
    background: rgba(249, 115, 22, 0.08);
}
body.fos-dark .FS-footer-info { color: var(--fos-text-muted); }
body.fos-dark .FS-footer-info b { color: var(--fos-text-primary); }

/* ============================================================
   KURAL 14 — MOBILE: page-header, FS-* bileşenler (≤768px)
   ============================================================ */
@media (max-width: 768px) {
    .fos-page-header {
        padding: 12px 14px;
        gap: 8px;
        margin-bottom: 16px;
    }
    .fos-page-title {
        font-size: 14px;
    }
    .fos-page-title i {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .fos-card-header {
        padding: 10px 14px;
    }
    .fos-card-body {
        padding: 14px;
    }
    .fos-card {
        padding: 14px;
        border-radius: var(--fos-radius);
    }
    .fos-card:has(.fos-card-header) {
        padding: 0;
    }

    .FS-wrap {
        border-radius: var(--fos-radius);
    }
    .FS-bar {
        padding: 6px 10px;
        gap: 6px;
    }
    .FS-search {
        min-width: 100px;
        max-width: 160px;
    }
    .FS-modes button {
        padding: 3px 5px;
        font-size: 10px;
    }

    .FS-panel {
        padding: 5px 10px;
        gap: 4px;
    }
    .FS-chip {
        font-size: 9px;
        padding: 2px 6px;
    }

    .FS-content-nav {
        padding: 6px 10px;
        gap: 6px;
        flex-wrap: wrap;
    }

    .FS-pager {
        padding: 6px 0;
    }
    .FS-pg {
        min-width: 24px;
        height: 24px;
        font-size: 10px;
    }

    .fos-table td {
        padding: 5px 8px;
        font-size: 11px;
    }
    .fos-table thead th {
        padding: 5px 8px;
        font-size: 9px;
    }

    /* İkon butonlar — mobile */
    .fos-btn-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .fos-actions {
        gap: 4px;
    }

    /* Mod butonları — mobile */
    .FS-modes button {
        padding: 5px 8px;
        font-size: 12px;
    }

    /* Sütun arama — mobile */
    .FS-col-inp {
        padding: 3px 5px;
        font-size: 10px;
    }

    /* Footer — mobile */
    .FS-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 12px;
    }
    .FS-export {
        justify-content: center;
        flex-wrap: wrap;
    }
    .FS-export-btn {
        padding: 4px 10px;
        font-size: 11px;
    }
    .FS-footer-center {
        justify-content: center;
    }
    .FS-footer-info {
        text-align: center;
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════════════════════
   CARİ ÖNER TYPEAHEAD
   Yeni cari formunda firma adı alanı altında önerileri gösterir.
   ═══════════════════════════════════════════════════════════ */
.fos-cari-onerir-wrap { position: relative; }
.fos-cari-onerir-list {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    z-index: 999;
    max-height: 260px; overflow-y: auto;
}
.fos-cari-onerir-item {
    padding: 9px 13px; cursor: pointer;
    border-bottom: 1px solid var(--fos-light-border);
    transition: background 0.1s;
    display: flex; flex-direction: column; gap: 2px;
}
.fos-cari-onerir-item:last-child { border-bottom: none; }
.fos-cari-onerir-item:hover,
.fos-cari-onerir-item.aktif { background: rgba(249,115,22,0.07); }
.fos-cari-onerir-adi { font-size: 13px; font-weight: 600; color: var(--fos-text-primary); }
.fos-cari-onerir-detay { font-size: 11px; color: var(--fos-text-secondary); }
/* Dark */
body.fos-dark .fos-cari-onerir-list {
    background: var(--fos-dark-card);
    border-color: var(--fos-dark-border);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
body.fos-dark .fos-cari-onerir-item { border-color: var(--fos-dark-border); }
body.fos-dark .fos-cari-onerir-item:hover,
body.fos-dark .fos-cari-onerir-item.aktif { background: rgba(249,115,22,0.12); }
body.fos-dark .fos-cari-onerir-adi { color: var(--fos-dark-text); }
body.fos-dark .fos-cari-onerir-detay { color: var(--fos-dark-muted); }
/* Mobile */
@media (max-width: 768px) { .fos-cari-onerir-list { max-height: 180px; } }

/* ═══════════════════════════════════════════════════════════
   FOS MODAL — Genel amaçlı modal katmanı
   ═══════════════════════════════════════════════════════════ */
.fos-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
    z-index: 8888; display: flex; align-items: center; justify-content: center;
}
.fos-modal-card {
    background: var(--fos-light-surface);
    border-radius: 12px; padding: 24px 28px;
    min-width: 380px; max-width: 500px; width: 92%;
    box-shadow: 0 8px 48px rgba(0,0,0,0.20);
    border: 1px solid var(--fos-light-border);
    position: relative;
}
.fos-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; gap: 10px;
}
.fos-modal-baslik {
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--fos-accent);
    display: flex; align-items: center; gap: 7px;
}
.fos-modal-kapat {
    background: none; border: none; cursor: pointer; font-size: 18px;
    color: var(--fos-text-secondary); line-height: 1; padding: 2px 6px; border-radius: 4px;
    transition: background 0.1s;
}
.fos-modal-kapat:hover { background: rgba(0,0,0,0.06); }
.fos-modal-hint {
    font-size: 12px; color: var(--fos-text-secondary);
    margin-bottom: 14px; line-height: 1.5;
}
/* Dark */
body.fos-dark .fos-modal-card {
    background: var(--fos-dark-card); border-color: var(--fos-dark-border);
    box-shadow: 0 8px 48px rgba(0,0,0,0.55);
}
body.fos-dark .fos-modal-kapat { color: var(--fos-dark-muted); }
body.fos-dark .fos-modal-kapat:hover { background: rgba(255,255,255,0.06); }
body.fos-dark .fos-modal-hint { color: var(--fos-dark-muted); }
/* Mobile */
@media (max-width: 768px) {
    .fos-modal-card { min-width: unset; padding: 18px 16px; }
}

/* ═══════════════════════════════════════════════════════════
   FOS INPUT — Doğrulama Stilleri (Stripe/Linear standardı)
   Minimal: border rengi + sağ köşede minik SVG ikon (✓/✗).
   Focus'ta temizlenir, blur'da gösterilir. Sayaç/counter yok.
   ═══════════════════════════════════════════════════════════ */

/* ── Valid — yeşil border + ✓ ikon ──────────────────────── */
.fos-input-valid {
    border-color: var(--fos-success) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%23059669'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    padding-right: 34px !important;
}
.fos-input-valid:focus {
    border-color: var(--fos-success) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.10) !important;
}

/* ── Invalid — kırmızı border + ✗ ikon ─────────────────── */
.fos-input-invalid {
    border-color: var(--fos-danger) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%23DC2626'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    padding-right: 34px !important;
}
.fos-input-invalid:focus {
    border-color: var(--fos-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}

/* ── Textarea ikon pozisyonu — sağ üst köşe ─────────────── */
textarea.fos-input-valid,
textarea.fos-input-invalid {
    background-position: right 10px top 10px;
}

/* ── Dark Mode — Doğrulama ──────────────────────────────── */
/* background: kısa yazımı repeat/position/size'ı sıfırladığından
   dark mode override'ında tüm background alt özellikleri açıkça yazılır */
body.fos-dark .fos-input-valid {
    border-color: #34D399 !important;
    background-color: var(--fos-surface-alt);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%2334D399'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
}
body.fos-dark .fos-input-valid:focus {
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12) !important;
}
body.fos-dark .fos-input-invalid {
    border-color: #F87171 !important;
    background-color: var(--fos-surface-alt);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%23F87171'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
}
body.fos-dark .fos-input-invalid:focus {
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important;
}

/* ── Dark Mode — Hint, Required, Validation ─────────────── */
body.fos-dark .fos-hint,
body.fos-dark .fos-hint i {
    color: var(--fos-dark-muted);
}
body.fos-dark .fos-validation {
    color: #F87171;
}
body.fos-dark .fos-label {
    color: var(--fos-dark-text);
}

/* ══════════════════════════════════════════════════════════
   CUSTOM SELECT — FosSelect (.fos-sel-*)
   Native select'i gizler, aranabilir premium dropdown oluşturur.
   ══════════════════════════════════════════════════════════ */

/* ── Wrapper — relative konumlama ── */
.fos-sel {
    position: relative;
    width: 100%;
}
/* ── Native select gizleme (JS ekler) ── */
.fos-sel > select { display: none; }

/* ── Trigger butonu — fos-input ile uyumlu ── */
.fos-sel-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    text-align: left;
    min-height: 36px;
    gap: 8px;
}
/* ── Değer metni ── */
.fos-sel-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--fos-light-text);
}
/* ── Placeholder stili (seçim yapılmamış) ── */
.fos-sel-ph {
    color: var(--fos-light-muted);
}
/* ── Ok ikonu ── */
.fos-sel-arrow {
    font-size: 11px;
    color: var(--fos-light-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
/* ── Açıkken ok döner ── */
.fos-sel-open .fos-sel-arrow {
    transform: rotate(180deg);
}
/* ── Açıkken trigger vurgusu ── */
.fos-sel-open .fos-sel-trigger {
    border-color: var(--fos-orange);
    box-shadow: 0 0 0 3px var(--fos-orange-muted);
}

/* ── Dropdown panel ── */
.fos-sel-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid var(--fos-light-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* ── Açık dropdown ── */
.fos-sel-open .fos-sel-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Arama kutusu wrapper ── */
.fos-sel-search {
    padding: 8px 10px 6px 10px;
    border-bottom: 1px solid var(--fos-light-border);
    flex-shrink: 0;
}
/* ── Arama input ── */
.fos-sel-search-input {
    width: 100%;
    border: 1px solid var(--fos-light-border);
    border-radius: 6px;
    padding: 6px 10px 6px 30px;
    font-size: 12.5px;
    font-family: 'DM Sans', sans-serif;
    color: var(--fos-light-text);
    background: var(--fos-light-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='%238B95A5'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 10px center;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fos-sel-search-input::placeholder {
    color: var(--fos-light-muted);
    font-size: 12px;
}
.fos-sel-search-input:focus {
    border-color: var(--fos-orange);
    box-shadow: 0 0 0 2px var(--fos-orange-muted);
}

/* ── Seçenek listesi ── */
.fos-sel-options {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}
/* ── Tekil seçenek ── */
.fos-sel-opt {
    padding: 7px 12px;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: var(--fos-light-text);
    cursor: pointer;
    transition: background 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fos-sel-opt:hover,
.fos-sel-opt.fos-sel-hl {
    background: var(--fos-orange-muted);
}
/* ── Seçili seçenek — sol accent + bold ── */
.fos-sel-opt.fos-sel-active {
    background: var(--fos-orange-muted);
    color: var(--fos-orange);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--fos-orange);
}

/* ── Boş durum mesajı ── */
.fos-sel-empty {
    padding: 14px 12px;
    font-size: 12px;
    color: var(--fos-light-muted);
    text-align: center;
    font-style: italic;
}

/* ── Scrollbar ── */
.fos-sel-options::-webkit-scrollbar { width: 5px; }
.fos-sel-options::-webkit-scrollbar-track { background: transparent; }
.fos-sel-options::-webkit-scrollbar-thumb { background: var(--fos-light-border); border-radius: 4px; }
.fos-sel-options::-webkit-scrollbar-thumb:hover { background: var(--fos-light-muted); }

/* ══════════════════════════════════════════════════════════
   DARK MODE — Custom Select
   ══════════════════════════════════════════════════════════ */
body.fos-dark .fos-sel-value { color: var(--fos-dark-text); }
body.fos-dark .fos-sel-ph { color: var(--fos-dark-muted); }
body.fos-dark .fos-sel-arrow { color: var(--fos-dark-muted); }

body.fos-dark .fos-sel-dropdown {
    background: var(--fos-dark-card);
    border-color: var(--fos-dark-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
}
body.fos-dark .fos-sel-search {
    border-bottom-color: var(--fos-dark-border);
}
body.fos-dark .fos-sel-search-input {
    background-color: var(--fos-dark-surface);
    border-color: var(--fos-dark-border);
    color: var(--fos-dark-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='%23607080'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}
body.fos-dark .fos-sel-search-input::placeholder { color: var(--fos-dark-muted); }
body.fos-dark .fos-sel-search-input:focus {
    border-color: var(--fos-orange);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
}
body.fos-dark .fos-sel-opt { color: var(--fos-dark-text); }
body.fos-dark .fos-sel-opt:hover,
body.fos-dark .fos-sel-opt.fos-sel-hl {
    background: rgba(249, 115, 22, 0.08);
}
body.fos-dark .fos-sel-opt.fos-sel-active {
    background: rgba(249, 115, 22, 0.12);
    color: var(--fos-orange);
}
body.fos-dark .fos-sel-empty { color: var(--fos-dark-muted); }
body.fos-dark .fos-sel-options::-webkit-scrollbar-thumb { background: var(--fos-dark-border); }
body.fos-dark .fos-sel-options::-webkit-scrollbar-thumb:hover { background: var(--fos-dark-muted); }

/* ── Mobile — Form Compact ──────────────────────────────── */
@media (max-width: 768px) {
    .fos-card-header { padding: 8px 14px; }
    .fos-card-body { padding: 10px 14px; }
    .fos-label { font-size: 11px; margin-bottom: 2px; }
    .fos-input { padding: 6px 10px; font-size: 12.5px; }
    .fos-hint { font-size: 10px; }

    /* ── Mobile — Custom Select ── */
    .fos-sel-trigger { min-height: 34px; }
    .fos-sel-dropdown { max-height: 240px; }
    .fos-sel-opt { padding: 8px 12px; font-size: 13px; }
    .fos-sel-search-input { padding: 7px 10px 7px 30px; }
}

/* ═══════════════════════════════════════════════════════════
   BAZ FİYAT HESAPLAMA ÇUBUĞU — FS-baz-fiyat-bar
   OtelTeklif/Duzenle — çarpan × baz fiyat otomatik hesap
   ═══════════════════════════════════════════════════════════ */
.FS-baz-fiyat-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #F97316;
    border-radius: 6px;
    padding: 8px 14px;
    margin-bottom: 12px;
    font-size: 13px;
}
.FS-baz-fiyat-bar .FS-baz-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}
.FS-baz-fiyat-bar .FS-baz-hint {
    font-size: 11px;
    color: #94a3b8;
    margin-left: auto;
}
/* Dark */
body.fos-dark .FS-baz-fiyat-bar {
    background: #1e293b;
    border-color: #334155;
    border-left-color: #F97316;
}
body.fos-dark .FS-baz-fiyat-bar .FS-baz-label { color: #94a3b8; }
body.fos-dark .FS-baz-fiyat-bar .FS-baz-hint  { color: #64748b; }
/* Mobile */
@media (max-width: 768px) {
    .FS-baz-fiyat-bar { padding: 8px 10px; gap: 8px; }
    .FS-baz-fiyat-bar .FS-baz-hint { margin-left: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   HESAP ÖZETİ — FS-hesap-ozet
   OtelTeklif/Duzenle — talep/kapasite karşılaştırma çubuğu
   ═══════════════════════════════════════════════════════════ */

/* ── OtelTeklif İşlem Kartı Bölümleri ── */
/* Onay ve Red bölümlerini görsel olarak ayıran kutu */
.otk-islem-bolum {
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid;
}
.otk-islem-onay {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.otk-islem-red {
    border-color: #fecaca;
    background: #fef2f2;
}
.otk-islem-baslik {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.otk-islem-onay .otk-islem-baslik { color: #15803d; }
.otk-islem-red  .otk-islem-baslik { color: #b91c1c; }
/* Dark mode */
body.fos-dark .otk-islem-onay { background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.2); }
body.fos-dark .otk-islem-red  { background: rgba(239,68,68,0.07);  border-color: rgba(239,68,68,0.2); }
.FS-hesap-ozet {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.FS-hesap-item {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #F97316;
    border-radius: 8px;
    padding: 12px 10px 10px;
    text-align: center;
    min-width: 100px;
}
.FS-hesap-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.FS-hesap-val {
    font-size: 26px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}
.FS-hesap-val.FS-danger { color: #ef4444; }
.FS-hesap-val.FS-success { color: #22c55e; }
/* Dark */
body.fos-dark .FS-hesap-item {
    background: #1e293b;
    border-color: #334155;
    border-top-color: #F97316;
}
body.fos-dark .FS-hesap-label { color: #94a3b8; }
body.fos-dark .FS-hesap-val   { color: #f1f5f9; }
/* Mobile */
@media (max-width: 768px) {
    .FS-hesap-item { flex: 1 1 calc(50% - 10px); padding: 10px 8px 8px; }
    .FS-hesap-val  { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════
   MALİYET TAHMİN KARTI — FS-maliyet-meta, FS-kur-chip
   OtelTeklif/Duzenle — fiyat × adet × gece = TRY hesabı
   KURAL 14: dark mode + mobile zorunlu
   ═══════════════════════════════════════════════════════════ */
/* Meta bilgi şeridi — tarih + kur yan yana */
.FS-maliyet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #F97316;
    margin-bottom: 4px;
}
.FS-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
}
/* Tek döviz kur chip'i — USD 35.50 ₺ gibi */
.FS-kur-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    color: #9a3412;
    margin-right: 4px;
}
.FS-kur-chip strong {
    color: #ea580c;
    font-weight: 700;
}
/* Toplam satırı vurgusu */
.FS-toplam-satir td {
    background: #fff7ed;
    border-top: 2px solid #F97316;
}
/* Dark */
body.fos-dark .FS-maliyet-meta {
    background: #1e293b;
    border-color: #334155;
    border-left-color: #F97316;
}
body.fos-dark .FS-meta-item { color: #94a3b8; }
body.fos-dark .FS-kur-chip {
    background: #431407;
    border-color: #7c2d12;
    color: #fdba74;
}
body.fos-dark .FS-kur-chip strong { color: #fb923c; }
body.fos-dark .FS-toplam-satir td {
    background: #1e293b;
    border-top-color: #F97316;
}
/* Döviz grubu ara toplam satırı (mavi ton) */
.FS-doviz-subtotal td {
    background: rgba(59, 130, 246, 0.06);
    border-top: 1px solid rgba(59, 130, 246, 0.25);
    font-size: 12px;
}
/* Dark */
body.fos-dark .FS-doviz-subtotal td {
    background: rgba(59, 130, 246, 0.12);
    border-top-color: rgba(59, 130, 246, 0.35);
}
/* Mobile */
@media (max-width: 768px) {
    .FS-maliyet-meta { flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 10px; }
    .FS-meta-item    { font-size: 12px; }
}

/* ── OtelTeklif Düzenle — tablo inline input'ları mobilde daraltma ── */
/* Sabit width style'lar masaüstünde gerekli, mobilde tablo yatay kayıyor */
@media (max-width: 768px) {
    /* İşlem kartı — teklif bilgileri üstüne alınca yeterli genişlik al */
    .otk-islem-bolum { padding: 10px; }
    .otk-islem-baslik { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FS-BR — CARİ / PERSONEL BİRLEŞTİR SAYFASI
   Prefix: FS-br-  (br = birleştir)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tab başlıkları ──────────────────────────────────────────────────────── */
.FS-br-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    background: var(--fos-light-bg);
    border: 1px solid var(--fos-light-border);
    border-radius: 10px;
    padding: 4px;
    width: fit-content;
}
.FS-br-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--fos-text-secondary);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.FS-br-tab:hover { color: #F97316; }
.FS-br-tab.active {
    background: var(--fos-light-surface);
    color: #F97316;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.FS-br-tab i { font-size: 13px; }

/* ── Hint notu ───────────────────────────────────────────────────────────── */
.FS-br-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: rgba(59,130,246,.05);
    border: 1px solid rgba(59,130,246,.18);
    border-left: 3px solid #3b82f6;
    border-radius: 8px;
    font-size: 12.5px;
    color: #334155;
    line-height: 1.5;
}
.FS-br-hint i { color: #3b82f6; font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ── İkili seçici satırı ─────────────────────────────────────────────────── */
.FS-br-row {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 0;
    align-items: start;
    margin-bottom: 20px;
}

/* ── Taraf kartları (slave / master) ─────────────────────────────────────── */
.FS-br-taraf {
    padding: 16px;
    border-radius: 10px;
    border: 2px solid var(--fos-light-border);
    background: var(--fos-light-surface);
    transition: border-color .2s;
}
.FS-br-slave-taraf  { border-color: rgba(239,68,68,.25);  background: rgba(239,68,68,.02); }
.FS-br-master-taraf { border-color: rgba(34,197,94,.25);  background: rgba(34,197,94,.02); }

/* Taraf başlık rozeti */
.FS-br-taraf-baslik { margin-bottom: 12px; }
.FS-br-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.FS-br-badge-slave  { background: rgba(239,68,68,.1);  color: #dc2626; }
.FS-br-badge-master { background: rgba(34,197,94,.12); color: #16a34a; }

/* ── Arama kutusu ────────────────────────────────────────────────────────── */
.FS-br-arama-wrap   { position: relative; margin-bottom: 10px; }
.FS-br-arama-iç     { position: relative; }
.FS-br-arama-ikon   { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 13px; pointer-events: none; }
.FS-br-arama-input  {
    width: 100%;
    padding: 8px 10px 8px 32px;
    font-size: 13px;
    border: 1px solid var(--fos-light-border);
    border-radius: 7px;
    background: var(--fos-light-surface);
    color: var(--fos-text-primary);
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.FS-br-arama-input:focus {
    border-color: #F97316;
    box-shadow: 0 0 0 3px rgba(249,115,22,.1);
}

/* Seçilen cari rozeti */
.FS-br-secilen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px;
    margin-top: 6px;
    border-radius: 6px;
    background: rgba(249,115,22,.07);
    border: 1px solid rgba(249,115,22,.2);
}
.FS-br-secilen-ad  { font-size: 12px; font-weight: 600; color: #EA6C0A; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.FS-br-secilen-sil { background: none; border: none; color: #F97316; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.FS-br-secilen-sil:hover { color: #dc2626; }

/* Öneri listesi */
.FS-br-oneri {
    display: none;             /* open class ile görünür */
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 700;
    max-height: 220px;
    overflow-y: auto;
}
.FS-br-oneri.open { display: block; }
.FS-br-oneri-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background .1s;
}
.FS-br-oneri-satir:hover { background: rgba(249,115,22,.06); }
.FS-br-oneri-kod  { font-size: 11px; font-weight: 700; color: #64748b; min-width: 70px; }
.FS-br-oneri-ad   { font-size: 12.5px; color: #1e293b; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.FS-br-oneri-tip  { flex-shrink: 0; }
.FS-br-oneri-bos  { padding: 10px 12px; font-size: 12px; color: #94a3b8; text-align: center; }

/* ── Orta ok ─────────────────────────────────────────────────────────────── */
.FS-br-ok-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    gap: 6px;
}
.FS-br-ok {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F97316, #FBBF24);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(249,115,22,.35);
}
.FS-br-ok i { font-size: 22px; color: #fff; }
.FS-br-ok-etiket { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #F97316; }

/* ── Önizleme kartı (AJAX sonucu) ────────────────────────────────────────── */
.FS-br-kart {
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid var(--fos-light-border);
    overflow: hidden;
    font-size: 12px;
}
.FS-br-kart-slave  { border-color: rgba(239,68,68,.3); }
.FS-br-kart-master { border-color: rgba(34,197,94,.3); }
.FS-br-kart-satir {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--fos-light-border);
}
.FS-br-kart-satir:last-child { border-bottom: none; }
.FS-br-kart-etiket { font-size: 10.5px; color: #94a3b8; min-width: 64px; flex-shrink: 0; }
.FS-br-kart-deger  { color: #334155; flex: 1; }

/* ── Alt aksiyon satırı ──────────────────────────────────────────────────── */
.FS-br-form-alt {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid var(--fos-light-border);
}

/* ── Toplu textarea ──────────────────────────────────────────────────────── */
.FS-br-textarea {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.7;
    resize: vertical;
    width: 100%;
    min-height: 200px;
}

/* ── Toplu önizleme blokları ─────────────────────────────────────────────── */
.FS-br-onizle-blok { margin-top: 20px; }
.FS-br-onizle-blok + .FS-br-onizle-blok { margin-top: 16px; }

.FS-br-onizle-baslik {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 7px 7px 0 0;
    border: 1px solid var(--fos-light-border);
    border-bottom: none;
    letter-spacing: .01em;
}
/* Geçerli: yeşil ton */
.FS-br-onizle-baslik-gecerli {
    background: rgba(34,197,94,.07);
    border-color: rgba(34,197,94,.25);
    color: #15803d;
}
.FS-br-onizle-baslik-gecerli i { color: #22c55e; }
/* Geçersiz: kırmızı ton */
.FS-br-onizle-baslik-gecersiz {
    background: rgba(239,68,68,.07);
    border-color: rgba(239,68,68,.25);
    color: #b91c1c;
}
.FS-br-onizle-baslik-gecersiz i { color: #ef4444; }
/* Blokların fos-table-wrap'ı üst köşe olmadan */
.FS-br-onizle-blok .fos-table-wrap { border-radius: 0 0 8px 8px; margin-top: 0; }
/* Satır sayısı badge'i */
.FS-br-onizle-sayi {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    opacity: .7;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — FS-BR
   ══════════════════════════════════════════════════════════════════════════ */
body.fos-dark .FS-br-tabs        { background: var(--fos-dark-bg); border-color: var(--fos-dark-border); }
body.fos-dark .FS-br-tab         { color: var(--fos-dark-text-secondary); }
body.fos-dark .FS-br-tab.active  { background: var(--fos-dark-card); color: #FBBF24; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
body.fos-dark .FS-br-hint        { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.25); color: #94a3b8; }
body.fos-dark .FS-br-taraf       { background: var(--fos-dark-card); border-color: var(--fos-dark-border); }
body.fos-dark .FS-br-slave-taraf  { background: rgba(239,68,68,.04);  border-color: rgba(239,68,68,.2); }
body.fos-dark .FS-br-master-taraf { background: rgba(34,197,94,.04);  border-color: rgba(34,197,94,.2); }
body.fos-dark .FS-br-arama-input { background: var(--fos-dark-bg); border-color: var(--fos-dark-border); color: var(--fos-dark-text-primary); }
body.fos-dark .FS-br-arama-input:focus { border-color: #F97316; }
body.fos-dark .FS-br-secilen     { background: rgba(249,115,22,.1); border-color: rgba(249,115,22,.3); }
body.fos-dark .FS-br-oneri       { background: var(--fos-dark-card); border-color: var(--fos-dark-border); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
body.fos-dark .FS-br-oneri-satir:hover { background: rgba(249,115,22,.1); }
body.fos-dark .FS-br-oneri-ad    { color: #cbd5e1; }
body.fos-dark .FS-br-kart        { border-color: var(--fos-dark-border); }
body.fos-dark .FS-br-kart-slave  { border-color: rgba(239,68,68,.25); }
body.fos-dark .FS-br-kart-master { border-color: rgba(34,197,94,.25); }
body.fos-dark .FS-br-kart-satir  { border-color: var(--fos-dark-border); }
body.fos-dark .FS-br-kart-deger  { color: #cbd5e1; }
body.fos-dark .FS-br-form-alt    { border-color: var(--fos-dark-border); }
body.fos-dark .FS-br-onizle-baslik-gecerli  { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.2);  color: #4ade80; }
body.fos-dark .FS-br-onizle-baslik-gecersiz { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.2);  color: #f87171; }
body.fos-dark .FS-br-textarea    { background: var(--fos-dark-bg); color: var(--fos-dark-text-primary); border-color: var(--fos-dark-border); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — FS-BR
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .FS-br-row    { grid-template-columns: 1fr; gap: 12px; }
    .FS-br-ok-wrap { flex-direction: row; padding-top: 0; justify-content: center; }
    .FS-br-ok     { width: 34px; height: 34px; }
    .FS-br-ok i   { font-size: 18px; transform: rotate(90deg); }
    .FS-br-tabs   { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FS-HATA-LOG — Okunmamış satır vurgusu
   ══════════════════════════════════════════════════════════════════════════ */
/* Okunmamış hata log satırı — sol turuncu accent çizgisi + hafif arka plan */
.FS-hlog-satir-yeni {
    box-shadow: inset 3px 0 0 #F97316;
    background-color: rgba(249, 115, 22, 0.04);
}
.FS-hlog-satir-yeni td:first-child {
    padding-left: 12px; /* sol accent ile içerik hizalaması */
}
/* Dark mode: daha belirgin ton */
body.fos-dark .FS-hlog-satir-yeni {
    background-color: rgba(249, 115, 22, 0.07);
}
/* Mobile: accent biraz daha kalın */
@media (max-width: 768px) {
    .FS-hlog-satir-yeni { box-shadow: inset 4px 0 0 #F97316; }
}

/* ═══════════════════════════════════════════════════════════════
   PROGRAM STANDARTLARI — PST- prefix (Views/Standart/Index.cshtml)
   Tab bazlı Ülke/Şehir/İlçe/Sektör yönetim sayfası bileşenleri
   KURAL 14: Her kural dark mode + mobile ile birlikte yazılır
   ═══════════════════════════════════════════════════════════════ */

/* ── Tab navigasyon wrapper ──────────────────────────────────── */
.PST-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fos-border, #E5E7EB);
}

/* ── Tek tab butonu ─────────────────────────────────────────── */
.PST-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    background: var(--fos-light-bg, #F8FAFC);
    border: 1px solid var(--fos-border, #E5E7EB);
    text-decoration: none;
    transition: all 0.18s;
    cursor: pointer;
}
.PST-tab:hover {
    color: #F97316;
    border-color: #F97316;
    background: rgba(249,115,22,.06);
    text-decoration: none;
}

/* ── Aktif tab ──────────────────────────────────────────────── */
.PST-tab-aktif {
    color: #fff;
    background: linear-gradient(135deg, #F97316, #FBBF24);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(249,115,22,.35);
}
.PST-tab-aktif:hover {
    color: #fff;
    background: linear-gradient(135deg, #EA6C0A, #F5B520);
    border-color: transparent;
}

/* ── Tab kayıt sayacı rozeti ────────────────────────────────── */
.PST-tab-sayac {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(0,0,0,.1);
    color: inherit;
}
.PST-tab-aktif .PST-tab-sayac {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* ── Ekle formu + import butonunu barındıran şerit ──────────── */
.PST-ekle-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--fos-light-bg, #F8FAFC);
    border: 1px solid var(--fos-border, #E5E7EB);
    border-radius: 8px;
    border-left: 3px solid #F97316;
}

/* ── Tek alan grubu (label + input) ────────────────────────── */
.PST-ekle-grup {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* ── Geniş alan (adi) — daha fazla yer kaplar ──────────────── */
.PST-ekle-grup-genis {
    flex: 1;
    min-width: 180px;
}

/* ── Ekle butonu grubu — label hizalama için ───────────────── */
.PST-ekle-btn-wrap {
    flex-shrink: 0;
}

/* ── Kısa kodu inputu (TR, IST vb.) ─────────────────────────── */
.PST-input-kodu {
    width: 90px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

/* ── Ekle butonu ────────────────────────────────────────────── */
.PST-ekle-btn {
    white-space: nowrap;
}

/* ── JSON import formu — inline bar içinde sağa ──────────────── */
.PST-import-form {
    display: flex;
    align-items: flex-end;
    margin-left: auto;
    flex-shrink: 0;
}
.PST-import-btn {
    white-space: nowrap;
}

/* ── DARK MODE ──────────────────────────────────────────────── */
body.fos-dark .PST-tabs {
    border-bottom-color: rgba(255,255,255,.08);
}
body.fos-dark .PST-tab {
    color: rgba(255,255,255,.55);
    background: var(--fos-dark-surface, #1E293B);
    border-color: rgba(255,255,255,.1);
}
body.fos-dark .PST-tab:hover {
    color: #F97316;
    border-color: #F97316;
    background: rgba(249,115,22,.1);
}
body.fos-dark .PST-tab-aktif,
body.fos-dark .PST-tab-aktif:hover {
    color: #fff;
    background: linear-gradient(135deg, #F97316, #FBBF24);
    border-color: transparent;
}
body.fos-dark .PST-ekle-bar {
    background: var(--fos-dark-surface, #1E293B);
    border-color: rgba(255,255,255,.08);
    border-left-color: #F97316;
}

/* ── Üst araç çubuğu — FuarOS yükle butonu + bilgi toggle ─── */
/* ── PST header aksiyon grubu — fos-page-header sağ tarafı ── */
.PST-header-aksiyonlar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Eski PST-ust-bar — artık kullanılmıyor, kaldırılacak ─── */
.PST-ust-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fos-border, #E5E7EB);
}

/* ── FuarOS hazır veri butonu — yeşil vurgu ─────────────────── */
.PST-fuaros-btn {
    background: linear-gradient(135deg, #16A34A, #4ADE80);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(22,163,74,.3);
    white-space: nowrap;
}
.PST-fuaros-btn:hover {
    background: linear-gradient(135deg, #15803D, #22C55E);
    box-shadow: 0 4px 14px rgba(22,163,74,.45);
    color: #fff;
}

/* ── JSON Format bilgi toggle butonu ────────────────────────── */
.PST-format-toggle-btn { white-space: nowrap; }

/* ── JSON format bilgi kutusu ───────────────────────────────── */
.PST-format-bilgi {
    background: var(--fos-light-bg, #F8FAFC);
    border: 1px solid var(--fos-border, #E5E7EB);
    border-left: 3px solid #3B82F6;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

/* ── Format kutusu başlığı ──────────────────────────────────── */
.PST-format-baslik {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #3B82F6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* ── Her tip başlığı ─────────────────────────────────────────── */
.PST-format-tip-baslik {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 12px 0 4px;
}

/* ── Kod örneği — monospace kutu ────────────────────────────── */
.PST-format-code {
    background: #0F172A;
    color: #E2E8F0;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 11px;
    line-height: 1.6;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 0 0 4px;
    overflow-x: auto;
    white-space: pre;
}

/* ── Upsert davranışı notu ──────────────────────────────────── */
.PST-format-not {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: #F97316;
    font-weight: 600;
    margin-top: 12px;
}

/* ── DARK MODE ──────────────────────────────────────────────── */
body.fos-dark .PST-tabs {
    border-bottom-color: rgba(255,255,255,.08);
}
body.fos-dark .PST-tab {
    color: rgba(255,255,255,.55);
    background: var(--fos-dark-surface, #1E293B);
    border-color: rgba(255,255,255,.1);
}
body.fos-dark .PST-tab:hover {
    color: #F97316;
    border-color: #F97316;
    background: rgba(249,115,22,.1);
}
body.fos-dark .PST-tab-aktif,
body.fos-dark .PST-tab-aktif:hover {
    color: #fff;
    background: linear-gradient(135deg, #F97316, #FBBF24);
    border-color: transparent;
}
body.fos-dark .PST-ekle-bar {
    background: var(--fos-dark-surface, #1E293B);
    border-color: rgba(255,255,255,.08);
    border-left-color: #F97316;
}
body.fos-dark .PST-ust-bar {
    border-bottom-color: rgba(255,255,255,.08);
}
body.fos-dark .PST-format-bilgi {
    background: var(--fos-dark-surface, #1E293B);
    border-color: rgba(255,255,255,.08);
    border-left-color: #3B82F6;
}
body.fos-dark .PST-format-tip-baslik { color: rgba(255,255,255,.45); }
body.fos-dark .PST-format-code { background: #020617; color: #94A3B8; }

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .PST-header-aksiyonlar { gap: 6px; }
    .PST-ust-bar { gap: 6px; }
    .PST-fuaros-btn { font-size: 12px; }
    .PST-tabs { gap: 4px; margin-bottom: 14px; padding-bottom: 12px; }
    .PST-tab  { padding: 6px 10px; font-size: 11px; }
    .PST-ekle-bar { flex-direction: column; align-items: stretch; gap: 8px; }
    .PST-ekle-grup-genis { min-width: 0; }
    .PST-import-form { margin-left: 0; }
    .PST-input-kodu { width: 100%; }
    .PST-format-code { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   TC — TEKLİF ÇEVİR (Views/Sozlesme/TeklifCevir.cshtml)
   Onaylanan teklif → sözleşme dönüşüm ekranı.
   Üst: kilitli teklif bilgileri. Alt: tamamlama formu.
   KURAL 14: dark mode + mobile birlikte yazılır
   ═══════════════════════════════════════════════════════════════ */

/* ── Kilitli panel — soldan mavi accent çizgisi ───────────────── */
.TC-kilitli-panel {
    border-left: 3px solid #3B82F6;
}

/* ── Kilitli alan etiketi ──────────────────────────────────────── */
.TC-kilitli-etiket {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 4px;
}

/* ── Kilitli alan değeri ───────────────────────────────────────── */
.TC-kilitli-deger {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Dark mode ────────────────────────────────────────────────── */
body.fos-dark .TC-kilitli-panel {
    border-left-color: #60A5FA;
}
body.fos-dark .TC-kilitli-etiket {
    color: rgba(255,255,255,.45);
}
body.fos-dark .TC-kilitli-deger {
    color: rgba(255,255,255,.87);
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .TC-kilitli-deger { font-size: 13px; }
}

/* ============================================================
   HARİTA EDİTÖRÜ — HA- prefix
   Stand sürükle/bırak kat planı editörü ve görüntüleyici.
   ============================================================ */

/* ── Ana layout: sidebar + harita yan yana ── */
.HA-editor {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* ── Sol: yerleştirilmemiş standlar listesi ── */
.HA-sidebar {
    width: 200px;
    flex-shrink: 0;
    background: var(--fos-card-bg, #fff);
    border: 1px solid var(--fos-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.HA-sidebar-header {
    padding: 10px 12px;
    background: linear-gradient(135deg, #fff8f0, #fff3e8);
    border-bottom: 1px solid #fed7aa;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #9a3412;
    letter-spacing: .5px;
}
.HA-sidebar-body {
    padding: 8px;
    max-height: 520px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.HA-sidebar-empty {
    padding: 16px 8px;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
}

/* ── Sidebar stand item — sürüklenebilir ── */
.HA-item {
    padding: 7px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #F97316;
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    transition: background .15s, box-shadow .15s;
}
.HA-item:hover {
    background: #fff7ed;
    border-color: #fed7aa;
    box-shadow: 0 2px 6px rgba(249,115,22,.15);
}
.HA-item:active { cursor: grabbing; }
.HA-item-no {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.HA-item-cari {
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* ── Sağ: harita sütunu (zoom bar + wrap) ── */
.HA-map-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
/* Zoom kontrol çubuğu */
.HA-zoom-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.HA-zoom-btn {
    width: 30px; height: 30px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}
.HA-zoom-btn:hover { background: #fff7ed; border-color: #F97316; color: #F97316; }
.HA-zoom-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    min-width: 40px;
    text-align: center;
    user-select: none;
}
/* Scroll edilebilir harita konteyner */
.HA-map-wrap {
    position: relative;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    overflow: auto;        /* zoom'da scroll aktif */
    max-height: 75vh;      /* çok uzun sayfaları önle */
    min-height: 300px;
    background: #f1f5f9;
    cursor: crosshair;
}
/* Zoom'lanabilir iç canvas — genişliği JS ile değişir */
.HA-map-canvas {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0; /* img altındaki boşluğu kaldır */
    font-size: 0;   /* inline boşlukları sıfırla */
}
/* Chip'lerde line-height miras alınmasın — metin görünsün */
.HA-map-canvas .HA-chip,
.HA-map-canvas .HA-chip-ro { line-height: normal; font-size: inherit; }
.HA-map-wrap.HA-drag-over {
    border-color: #F97316;
    box-shadow: 0 0 0 3px rgba(249,115,22,.2);
}
.HA-map-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.HA-map-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 12px;
    color: #94a3b8;
    font-size: 13px;
}
.HA-map-empty i { font-size: 40px; opacity: .4; }

/* ── Haritadaki stand chip'leri ── */
.HA-chip {
    position: absolute;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(249,115,22,.88), rgba(251,191,36,.88));
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(249,115,22,.45);
    border: 2px solid rgba(255,255,255,.55);
    overflow: visible; /* handle'lar chip dışına taşabilir */
    z-index: 10;
    transition: box-shadow .15s;
    cursor: grab;
    user-select: none;
    min-width: 44px;
    min-height: 30px;
    width: 8%;
    height: 5%;
}
.HA-chip:hover { box-shadow: 0 4px 14px rgba(249,115,22,.6); z-index: 20; }
.HA-chip:active { cursor: grabbing; }
/* İçerik wrapper — metin overflow burada kırpılır */
.HA-chip-content {
    position: absolute;
    inset: 4px 20px 4px 5px; /* sağda close btn için boşluk */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    pointer-events: none; /* tıklamalar chip'e geçsin */
}
.HA-chip-no {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.HA-chip-name {
    font-size: 10px;
    font-weight: 600;
    opacity: .92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* × kapat butonu — sağ üst köşe */
.HA-chip-close {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,.28);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}
.HA-chip-close:hover { background: rgba(0,0,0,.5); }
/* Boyutlandırma handle'ları — 8 yön */
.HA-chip-handle {
    position: absolute;
    z-index: 25;
    background: transparent;
    transition: background .1s;
}
/* Kenar handle'ları — tamamen chip DIŞINDA (0 iç overlap) — chip gövdesine basmak her zaman drag */
.HA-h-n  { top: -4px;    left: 8px;    right: 8px;   height: 4px;  cursor: n-resize; }
.HA-h-s  { bottom: -4px; left: 8px;    right: 8px;   height: 4px;  cursor: s-resize; }
.HA-h-e  { right: -4px;  top: 8px;     bottom: 8px;  width: 4px;   cursor: e-resize; }
.HA-h-w  { left: -4px;   top: 8px;     bottom: 8px;  width: 4px;   cursor: w-resize; }
/* Köşe handle'ları — tamamen chip dışında */
.HA-h-ne { top: -4px;    right: -4px;  width: 6px;   height: 6px;  cursor: ne-resize; }
.HA-h-nw { top: -4px;    left: -4px;   width: 6px;   height: 6px;  cursor: nw-resize; }
.HA-h-se { bottom: -4px; right: -4px;  width: 6px;   height: 6px;  cursor: se-resize; }
.HA-h-sw { bottom: -4px; left: -4px;   width: 6px;   height: 6px;  cursor: sw-resize; }
/* Chip hover'ında handle'lar belirginleşir */
.HA-chip:hover .HA-h-n,
.HA-chip:hover .HA-h-s  { background: rgba(255,255,255,.7); border-radius: 2px; }
.HA-chip:hover .HA-h-e,
.HA-chip:hover .HA-h-w  { background: rgba(255,255,255,.7); border-radius: 2px; }
.HA-chip:hover .HA-h-ne,
.HA-chip:hover .HA-h-nw,
.HA-chip:hover .HA-h-se,
.HA-chip:hover .HA-h-sw { background: #fff; border: 2px solid #F97316; border-radius: 3px; }
/* Handle üzerine gelinince daha da belirgin */
.HA-chip-handle:hover { background: #fff !important; box-shadow: 0 0 4px rgba(249,115,22,.8); }

/* ── Sürükleme sırasında cursor'u takip eden ghost ── */
.HA-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background: linear-gradient(135deg, #F97316, #FBBF24);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(249,115,22,.5);
    border: 2px solid rgba(255,255,255,.6);
    opacity: .85;
    transform: translate(-50%, -50%);
    /* Sabit chip boyutu — metin uzunluğundan bağımsız */
    width: 90px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 8px;
}

/* ── Readonly görüntüleme chip'i (HaritaGor) ── */
.HA-chip-ro {
    position: absolute;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(30,64,175,.88), rgba(59,130,246,.88));
    color: #fff;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-shadow: 0 2px 10px rgba(59,130,246,.45);
    border: 2px solid rgba(255,255,255,.5);
    overflow: hidden;
    z-index: 10;
    cursor: default;
    min-width: 44px;
    min-height: 30px;
    text-align: center;
    /* genişlik ve yükseklik inline style ile DB'den gelir */
}
.HA-chip-ro-no {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.HA-chip-ro-name {
    font-size: 9px;
    font-weight: 600;
    opacity: .9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Resim yükleme alanı ── */
.HA-upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.HA-upload-zone:hover {
    border-color: #F97316;
    background: #fff7ed;
}
.HA-upload-zone i { font-size: 32px; color: #cbd5e1; margin-bottom: 8px; }
.HA-upload-zone:hover i { color: #F97316; }
.HA-upload-zone p { font-size: 13px; color: #64748b; margin: 0; }

/* ── Sayaç badge'leri ── */
.HA-count-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* ── Dark mode ── */
body.fos-dark .HA-sidebar {
    background: var(--fos-dark-card, #1e293b);
    border-color: rgba(255,255,255,.08);
}
body.fos-dark .HA-sidebar-header {
    background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(249,115,22,.08));
    border-color: rgba(249,115,22,.2);
    color: #fb923c;
}
body.fos-dark .HA-item {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}
body.fos-dark .HA-item:hover {
    background: rgba(249,115,22,.1);
    border-color: rgba(249,115,22,.3);
}
body.fos-dark .HA-item-no { color: rgba(255,255,255,.87); }
body.fos-dark .HA-item-cari { color: rgba(255,255,255,.45); }
body.fos-dark .HA-map-wrap {
    border-color: rgba(255,255,255,.1);
    background: #0f172a;
}
body.fos-dark .HA-map-wrap.HA-drag-over { border-color: #F97316; }
body.fos-dark .HA-zoom-btn { background: var(--fos-dark-card,#1e293b); border-color: #334155; color: #94a3b8; }
body.fos-dark .HA-zoom-btn:hover { border-color: #F97316; color: #F97316; }
body.fos-dark .HA-zoom-label { color: #94a3b8; }
body.fos-dark .HA-upload-zone {
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.03);
}
body.fos-dark .HA-upload-zone:hover {
    border-color: #F97316;
    background: rgba(249,115,22,.08);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .HA-editor { flex-direction: column; }
    .HA-sidebar { width: 100%; }
    .HA-sidebar-body { max-height: 180px; flex-direction: row; flex-wrap: wrap; }
    .HA-item { min-width: 80px; }
    .HA-map-wrap { max-height: 60vw; }
}

/* ── HaritaGor baskı stili ── */
@media print {
    /* Sidebar, navbar, page header, butonlar, alert — gizle */
    .fos-sidebar, .fos-navbar, .fos-page-header,
    .fos-card-header, .fos-alert { display: none !important; }

    /* Body background pattern — baskıda boş noktalı sayfa oluşturur, kaldır */
    body, body.fos-body {
        background: #fff !important;
        background-image: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* min-height'lar baskıda boş sayfa açar — sıfırla */
    .fos-main-wrapper {
        margin: 0 !important;
        min-height: 0 !important;
    }
    .fos-content {
        padding: 8px !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Kart border / shadow kaldır */
    .fos-card { box-shadow: none !important; border: none !important; }
    .fos-card-body { padding: 0 !important; }

    /* Harita wrap — tam genişlik, max-height yok, scroll yok */
    .HA-map-wrap {
        max-height: none !important;
        overflow: visible !important;
        border: none !important;
        border-radius: 0 !important;
    }
    /* Canvas tam genişlik */
    .HA-map-canvas { width: 100% !important; }
}

/* ================================================================
   DAVET OLUŞTUR (DVO) — Views/Davet/Olustur.cshtml
   ================================================================ */

/* ── Cari autocomplete öneri listesi ──────────────────────────── */
.dvo-oneri-list {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--fos-white, #fff);
    border: 1px solid var(--fos-border, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 260px;
    overflow-y: auto;
}
body.fos-dark .dvo-oneri-list {
    background: var(--fos-dark-card, #1e2a3a);
    border-color: var(--fos-dark-border, #2d3f52);
}

.dvo-oneri-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--fos-border, #dee2e6);
    transition: background .12s;
}
.dvo-oneri-item:last-child { border-bottom: none; }
.dvo-oneri-item:hover { background: rgba(249,115,22,.08); }
body.fos-dark .dvo-oneri-item:hover { background: rgba(249,115,22,.12); }
body.fos-dark .dvo-oneri-item { border-color: var(--fos-dark-border, #2d3f52); }

.dvo-oneri-kodu {
    font-family: var(--fos-font-mono, monospace);
    font-size: 12px;
    color: var(--fos-orange, #F97316);
    font-weight: 600;
    min-width: 100px;
}
.dvo-oneri-adi {
    flex: 1;
    font-weight: 500;
    color: var(--fos-text, #212529);
}
body.fos-dark .dvo-oneri-adi { color: var(--fos-dark-text, #e2e8f0); }
.dvo-oneri-sehir {
    font-size: 11px;
    color: var(--fos-muted, #6c757d);
}
/* Personel eşleşme etiketi — "Metin Oktay" yazınca personel üzerinden firma bulundu */
.dvo-oneri-eslesen {
    font-size: 10px;
    color: #0ea5e9;
    font-weight: 600;
    margin-left: 4px;
}
/* Dark mode */
body.fos-dark .dvo-oneri-eslesen {
    color: #38bdf8;
}

/* ── Oda / Kişi hakkı büyük sayı kutusu ──────────────────────── */
.dvo-hak-kutu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fos-border, #dee2e6);
}
.dvo-hak-kutu:last-of-type { border-bottom: none; }
body.fos-dark .dvo-hak-kutu { border-color: var(--fos-dark-border, #2d3f52); }

.dvo-hak-sayi {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--fos-orange, #F97316);
    line-height: 1;
    min-width: 56px;
    text-align: center;
}
.dvo-hak-sayi.dvo-hak-sifir { color: var(--fos-muted, #6c757d); }

.dvo-hak-etiket {
    font-size: 12px;
    color: var(--fos-muted, #6c757d);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Sonuç paneli ─────────────────────────────────────────────── */
.dvo-sonuc-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 16px;
    background: var(--fos-bg-alt, #f8f9fa);
    border-radius: 8px;
    border: 1px solid var(--fos-border, #dee2e6);
}
body.fos-dark .dvo-sonuc-panel {
    background: var(--fos-dark-base, #111827);
    border-color: var(--fos-dark-border, #2d3f52);
}

.dvo-sonuc-alan {
    display: flex;
    flex-direction: column;
}

/* ── PIN / Kısa URL büyük kodu ────────────────────────────────── */
.dvo-pin-kodu {
    font-family: var(--fos-font-mono, monospace);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--fos-text, #212529);
}
body.fos-dark .dvo-pin-kodu { color: var(--fos-dark-text, #e2e8f0); }

.dvo-pin-vurgu { color: var(--fos-orange, #F97316) !important; }

/* ── Dark mode overrides ──────────────────────────────────────── */
body.fos-dark .dvo-hak-sayi.dvo-hak-sifir { color: #4b5563; }

/* ── Mobile responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .dvo-sonuc-panel { grid-template-columns: 1fr 1fr; gap: 12px; }
    .dvo-pin-kodu { font-size: 1.3rem; }
    .dvo-hak-sayi { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   FS-TAB — Evrensel tab navigasyon bileşeni
   Kullanım: .FS-tab-bar > button.FS-tab-btn[data-tab="x"]
             .FS-tab-pane#tab-x
   JS: her .FS-tab-btn click → FS-active sınıfı toggle
   ═══════════════════════════════════════════════════════════════ */
.FS-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    border-bottom: 2px solid var(--fos-orange, #F97316);
    margin-bottom: 14px;
}
.FS-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: .77rem;
    font-weight: 600;
    border: 1px solid var(--fos-light-border, #e5e7eb);
    border-bottom: none;
    background: var(--fos-light-bg, #f8f9fa);
    color: var(--fos-text-secondary, #6b7280);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: background .13s, color .13s;
    margin-bottom: -2px;
    white-space: nowrap;
}
.FS-tab-btn:hover { color: #F97316; background: #fff; }
.FS-tab-btn.FS-active {
    background: var(--fos-orange, #F97316);
    color: #fff;
    border-color: var(--fos-orange, #F97316);
}
.FS-tab-btn.FS-tab-accent { color: var(--fos-orange, #F97316); border-color: var(--fos-orange, #F97316); }
.FS-tab-btn.FS-tab-accent:hover { background: #fff7ed; }
.FS-tab-btn.FS-tab-accent.FS-active { background: var(--fos-orange, #F97316); color: #fff; }
.FS-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 8px;
    background: rgba(0,0,0,.12);
    color: inherit;
    line-height: 1;
}
.FS-tab-btn.FS-active .FS-tab-badge { background: rgba(255,255,255,.3); color: #fff; }
.FS-tab-pane { display: none; }
.FS-tab-pane.FS-active { display: block; }
body.fos-dark .FS-tab-btn {
    background: var(--fos-dark-bg, #1e2532);
    color: var(--fos-dark-text-secondary, #9ca3af);
    border-color: var(--fos-dark-border, #374151);
}
body.fos-dark .FS-tab-btn:hover { color: #FBBF24; background: var(--fos-dark-card, #252d3d); }
body.fos-dark .FS-tab-btn.FS-active { background: #F97316; color: #fff; border-color: #F97316; }
body.fos-dark .FS-tab-btn.FS-tab-accent { color: #FBBF24; border-color: #F97316; }
body.fos-dark .FS-tab-bar { border-color: #F97316; }
@media (max-width: 576px) {
    .FS-tab-btn { padding: 5px 9px; font-size: .72rem; gap: 3px; }
    .FS-tab-bar { gap: 2px; }
}


/* ── DVO-HAK: Davet oluşturma — oda hak edişi bölümü ─────────────────────── */
.dvo-hak-bolum {
    background: var(--fos-bg-muted, #f8fafc);
    border: 1px solid var(--fos-border, #e5e7eb);
    border-left: 3px solid #F97316;
    border-radius: 8px;
    padding: 12px 14px;
}
.dvo-hak-baslik {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #F97316;
    margin-bottom: 10px;
    letter-spacing: .04em;
}
/* Dark mode */
body.fos-dark .dvo-hak-bolum {
    background: var(--fos-dark-card, #252d3d);
    border-color: var(--fos-dark-border, #374151);
    border-left-color: #F97316;
}
/* Mobile */
@media (max-width: 768px) {
    .dvo-hak-bolum { padding: 10px 10px; }
}

/* ── PRP: Portal PersonelSec — tab ve öneri paneli ──────────────────────── */
/* Tab bar — sekme seçici */
.prp-tab-bar {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--fos-border, #e5e7eb);
    padding-bottom: 0;
}
/* Tab buton — pasif */
.prp-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--fos-text-secondary, #6b7280);
    cursor: pointer;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color .15s, border-color .15s;
}
.prp-tab-btn:hover { color: #F97316; }
/* Tab buton — aktif */
.prp-tab-btn.prp-tab-active {
    color: #F97316;
    border-bottom-color: #F97316;
    background: transparent;
}
/* TC arama öneri paneli */
.prp-oneri-panel {
    position: relative;
    margin-top: 4px;
    background: var(--fos-card-bg, #fff);
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    z-index: 10;
}
.prp-oneri-item { display: flex; flex-direction: column; }
/* Dark mode */
body.fos-dark .prp-tab-btn { color: var(--fos-dark-text-secondary, #9ca3af); }
body.fos-dark .prp-tab-btn:hover { color: #FBBF24; }
body.fos-dark .prp-tab-btn.prp-tab-active { color: #FBBF24; border-bottom-color: #FBBF24; }
body.fos-dark .prp-tab-bar { border-color: var(--fos-dark-border, #374151); }
body.fos-dark .prp-oneri-panel {
    background: var(--fos-dark-card, #252d3d);
    border-color: var(--fos-dark-border, #374151);
}
/* Mobile */
@media (max-width: 576px) {
    .prp-tab-btn { padding: 5px 8px; font-size: .75rem; }
}

/* ── PRP-PERSONEL: OdaDagil personel seçim satırı ───────────────────────── */
/* Personel kart — checkbox etrafında tıklanabilir label */
.prp-personel-satir {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: var(--fos-card-bg, #fff);
}
.prp-personel-satir:hover { border-color: #F97316; background: #fff8f0; }
/* Seçili durum — turuncu çerçeve + açık arka plan */
.prp-personel-satir.prp-personel-secili {
    border-color: #F97316;
    background: #fff3e0;
}
/* Dark mode */
body.fos-dark .prp-personel-satir {
    background: var(--fos-dark-card, #252d3d);
    border-color: var(--fos-dark-border, #374151);
}
body.fos-dark .prp-personel-satir:hover { border-color: #F97316; background: #2d2112; }
body.fos-dark .prp-personel-satir.prp-personel-secili { border-color: #F97316; background: #2a1e0e; }
/* Mobile */
@media (max-width: 576px) {
    .prp-personel-satir { padding: 6px 8px; }
}

/* ── PRP-OZET: Portal özet sayfası ──────────────────────────────────────── */
/* Büyük checkmark banner — teşekkür ekranı */
.prp-ozet-banner {
    text-align: center;
    padding: 28px 20px 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff8f0 100%);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    margin-bottom: 20px;
}
.prp-ozet-check {
    font-size: 3rem;
    color: #16a34a;
    margin-bottom: 8px;
    line-height: 1;
}
.prp-ozet-mesaj {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}
/* Personel özet satırı */
.prp-ozet-personel {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: 8px;
    background: var(--fos-bg-muted, #f8fafc);
}
/* Oda özet satırı */
.prp-ozet-oda {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: 8px;
    background: var(--fos-bg-muted, #f8fafc);
}
/* Dark mode */
body.fos-dark .prp-ozet-banner {
    background: linear-gradient(135deg, #0f2416 0%, #1a1200 100%);
    border-color: #166534;
}
body.fos-dark .prp-ozet-mesaj { color: #f3f4f6; }
body.fos-dark .prp-ozet-personel,
body.fos-dark .prp-ozet-oda {
    background: var(--fos-dark-card, #252d3d);
    border-color: var(--fos-dark-border, #374151);
}
/* Mobile */
@media (max-width: 576px) {
    .prp-ozet-banner { padding: 20px 14px; }
    .prp-ozet-check  { font-size: 2.4rem; }
    .prp-ozet-mesaj  { font-size: .95rem; }
}


/* ============================================================
   ODA DAĞILIMI — PORTAL KAPASİTE BARLARI VE ATAMA TABLOSU
   Sayfa: Views/Portal/OdaDagil.cshtml
   ============================================================ */

/* Kapasite özet sarmalayıcı */
.dod-kapasite-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--fos-bg-muted, #f8fafc);
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: 8px;
    padding: 12px 14px;
    border-left: 3px solid #F97316;
}

/* Her oda tipi için kapasite satırı */
.dod-kapasite-satir {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Oda tipi adı — sol taraf */
.dod-tip-adi {
    min-width: 180px;
    flex-shrink: 0;
}

/* Bar + sayı — sağ taraf */
.dod-kap-sag {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 120px;
}

/* Progress bar sarmalayıcı */
.dod-kap-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--fos-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
}

/* Doluluk barı — JS ile width güncellenir */
.dod-kap-bar {
    height: 100%;
    background: linear-gradient(90deg, #F97316, #FBBF24);
    border-radius: 4px;
    transition: width .3s ease, background .3s ease;
    width: 0%;
}

/* Bar tam dolunca yeşile döner */
.dod-kap-bar.dod-kap-bar-dolu {
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

/* Kapasite aşımında kırmızı */
.dod-kap-bar.dod-kap-bar-asim {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

/* Kapasite sayı metni */
.dod-kap-sayi {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--fos-text-muted, #6b7280);
    min-width: 48px;
}

/* Dark mode — kapasite wrap */
body.fos-dark .dod-kapasite-wrap {
    background: var(--fos-dark-card, #252d3d);
    border-color: var(--fos-dark-border, #374151);
    border-left-color: #F97316;
}
body.fos-dark .dod-kap-bar-wrap {
    background: var(--fos-dark-border, #374151);
}
body.fos-dark .dod-kap-sayi {
    color: #9ca3af;
}

/* Mobile — kapasite barları */
@media (max-width: 576px) {
    .dod-kapasite-satir {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .dod-tip-adi {
        min-width: auto;
    }
    .dod-kap-sag {
        width: 100%;
    }
}

/* ============================================================
   ODA DAĞILIMI KUTU TASARIMI — Portal OdaDagil v2
   ============================================================ */

/* Oda kutucukları grid — responsive */
.dod-oda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

/* Tek oda kutucuğu */
.dod-oda-kutu {
    border: 2px solid var(--fos-border, #e5e7eb);
    border-radius: 10px;
    background: var(--fos-bg-muted, #f8fafc);
    padding: 10px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
    min-height: 90px;
    user-select: none;
}
.dod-oda-kutu:hover {
    border-color: #F97316;
    box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
/* Seçili oda — turuncu */
.dod-oda-kutu.dod-aktif {
    border-color: #F97316;
    background: #fff7ed;
    box-shadow: 0 0 0 3px rgba(249,115,22,.18);
}
/* Dolu oda — yeşil */
/* Dolu — kapasite eşiti, uyarı amber */
.dod-oda-kutu.dod-dolu {
    border-color: #f59e0b;
    background: #fffbeb;
}
.dod-oda-kutu.dod-dolu:hover {
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}
/* Aşım — kapasiteden fazla kişi, turuncu */
.dod-oda-kutu.dod-asim {
    border-color: #f97316;
    background: #fff7ed;
}
.dod-oda-kutu.dod-asim:hover {
    border-color: #ea580c;
    box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}

/* Kutu başlığı: oda adı + sayaç */
.dod-oda-kutu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.dod-oda-kutu-tip {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--fos-text, #1f2937);
}
.dod-oda-kutu-kap {
    font-size: 11px;
    font-weight: 600;
    color: var(--fos-text-muted, #6b7280);
    background: var(--fos-border, #e5e7eb);
    padding: 1px 6px;
    border-radius: 20px;
}
.dod-dolu .dod-oda-kutu-kap {
    background: #bbf7d0;
    color: #15803d;
}
.dod-aktif .dod-oda-kutu-kap {
    background: #fed7aa;
    color: #c2410c;
}

/* Kişi slot'ları — kutu içi */
.dod-oda-kutu-kisiler {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Atanan kişi chip */
.dod-kisi-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 3px 6px 3px 8px;
    gap: 4px;
}
.dod-kisi-chip-isim {
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dod-kisi-chip-x {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s;
}
.dod-kisi-chip-x:hover { color: #dc2626; }

/* Boş yuva placeholder */
.dod-kisi-bos {
    font-size: 11px;
    color: #d1d5db;
    text-align: center;
    padding: 3px 0;
    border: 1px dashed #e5e7eb;
    border-radius: 6px;
}

/* Personel seçim listesi — kart'lar yatay flex-wrap */
.dod-personel-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Tek personel kart — tıklanabilir pill */
.dod-personel-kart {
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: 8px;
    background: var(--fos-bg-muted, #f8fafc);
    padding: 8px 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    min-width: 120px;
}
.dod-personel-kart:hover {
    border-color: #F97316;
    background: #fff7ed;
    box-shadow: 0 2px 8px rgba(249,115,22,.15);
}
.dod-personel-kart-isim {
    font-size: 13px;
    font-weight: 600;
    color: var(--fos-text, #1f2937);
}
.dod-personel-kart-kimlik {
    font-size: 11px;
    color: var(--fos-text-muted, #6b7280);
    margin-top: 2px;
}
/* Meta satır: GSM + Doğum tarihi */
.dod-personel-kart-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.dod-pk-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--fos-text-muted, #6b7280);
}
.dod-pk-meta-item i { font-size: 10px; opacity: .75; }
body.fos-dark .dod-pk-meta-item { color: var(--fos-dark-muted, #9ca3af); }

/* Otel grup başlığı — tek otel varsa gizli, çok otelli fuarlarda görünür */
.dod-otel-baslik {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #374151;
    padding: 10px 2px 5px;
    border-bottom: 2px solid #f97316;
    margin-bottom: 8px;
}
body.fos-dark .dod-otel-baslik { color: #d1d5db; border-bottom-color: #f97316; }
@media (max-width: 768px) { .dod-otel-baslik { font-size: .72rem; } }

/* Çocuk/Bebek talep satırı — her DOH kutucuğunun altında */
.dod-bebek-satir {
    border-top: 1px dashed #f59e0b33;
    margin-top: 6px;
    padding-top: 5px;
}
.dod-bebek-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #92400e;
    cursor: pointer;
    user-select: none;
}
.dod-bebek-chk {
    accent-color: #f59e0b;
    width: 13px;
    height: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
/* Dark mode */
body.fos-dark .dod-bebek-satir { border-top-color: #78350f44; }
body.fos-dark .dod-bebek-label { color: #fcd34d; }
/* Mobile */
@media (max-width: 768px) {
    .dod-bebek-label { font-size: 10px; }
}

/* Dark mode */
body.fos-dark .dod-oda-kutu {
    background: var(--fos-dark-card, #252d3d);
    border-color: var(--fos-dark-border, #374151);
}
body.fos-dark .dod-oda-kutu.dod-aktif {
    background: #431407;
    border-color: #F97316;
}
body.fos-dark .dod-oda-kutu.dod-dolu {
    background: #422006;
    border-color: #f59e0b;
}
body.fos-dark .dod-oda-kutu.dod-asim {
    background: #431407;
    border-color: #f97316;
}
body.fos-dark .dod-oda-kutu-tip  { color: #f3f4f6; }
body.fos-dark .dod-oda-kutu-kap  { background: #374151; color: #9ca3af; }
body.fos-dark .dod-dolu .dod-oda-kutu-kap { background: #78350f; color: #fde68a; }
body.fos-dark .dod-asim .dod-oda-kutu-kap { background: #7c2d12; color: #fdba74; }
body.fos-dark .dod-kisi-chip     { background: #1f2937; border-color: #374151; }
body.fos-dark .dod-kisi-chip-isim { color: #f3f4f6; }
body.fos-dark .dod-kisi-bos      { border-color: #374151; color: #4b5563; }
body.fos-dark .dod-personel-kart {
    background: var(--fos-dark-card, #252d3d);
    border-color: var(--fos-dark-border, #374151);
}
body.fos-dark .dod-personel-kart:hover { background: #431407; border-color: #F97316; }
body.fos-dark .dod-personel-kart-isim  { color: #f3f4f6; }

/* Mobile */
@media (max-width: 576px) {
    .dod-oda-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
    .dod-personel-kart { min-width: 100%; }
}

/* ── PORTAL — Davet Reddedildi terminal ekranı ─────────────── */
.prd-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px 16px;
}
.prd-kart {
    background: #fff;
    border: 1px solid #fecaca;
    border-top: 4px solid #dc2626;
    border-radius: 12px;
    padding: 40px 32px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(220,38,38,.10);
}
.prd-ikon {
    font-size: 3.5rem;
    color: #dc2626;
    margin-bottom: 16px;
    line-height: 1;
}
.prd-baslik {
    font-size: 1.5rem;
    font-weight: 700;
    color: #991b1b;
    margin: 0 0 8px;
}
.prd-firma {
    font-size: .9rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 16px;
}
.prd-aciklama {
    font-size: .88rem;
    color: #6b7280;
    margin: 0 0 20px;
    line-height: 1.6;
}
.prd-not {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: left;
}
.prd-not-baslik {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #b91c1c;
    margin-bottom: 6px;
}
.prd-not-metin {
    font-size: .85rem;
    color: #7f1d1d;
    line-height: 1.5;
}
/* Dark mode */
body.fos-dark .prd-kart {
    background: #1f1214;
    border-color: #7f1d1d;
    border-top-color: #dc2626;
}
body.fos-dark .prd-baslik  { color: #fca5a5; }
body.fos-dark .prd-firma   { color: #9ca3af; }
body.fos-dark .prd-aciklama { color: #9ca3af; }
body.fos-dark .prd-not     { background: #2d0a0a; border-color: #7f1d1d; }
body.fos-dark .prd-not-baslik { color: #fca5a5; }
body.fos-dark .prd-not-metin  { color: #fecaca; }
/* Mobile */
@media (max-width: 576px) {
    .prd-kart { padding: 28px 18px; }
    .prd-ikon { font-size: 2.8rem; }
    .prd-baslik { font-size: 1.25rem; }
}

/* ── DAVET — SMS Uyarı Modalı ────────────────────────────────── */
/* Modal overlay — JS display:flex ile aktif olur */
#onayKontrolModal {
    align-items: center;
    justify-content: center;
}
#onayKontrolModal[style*="flex"] {
    display: flex !important;
}
.dvt-sms-uyari-kart {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    border-top: 4px solid #f59e0b;
}
.dvt-sms-uyari-baslik {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 14px;
}
.dvt-sms-uyari-baslik i { font-size: 1.3rem; color: #f59e0b; }
.dvt-sms-uyari-sablon {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: #78350f;
    margin-bottom: 10px;
}
.dvt-sms-uyari-aciklama {
    font-size: 13px;
    color: #374151;
    margin-bottom: 8px;
}
.dvt-sms-uyari-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dvt-sms-uyari-liste li {
    font-size: 13px;
    color: #dc2626;
    padding: 4px 8px;
    background: #fef2f2;
    border-radius: 5px;
}
.dvt-sms-uyari-butonlar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* Dark mode */
body.fos-dark .dvt-sms-uyari-kart { background: var(--fos-dark-card, #1e2533); border-top-color: #f59e0b; }
body.fos-dark .dvt-sms-uyari-baslik { color: #fde68a; }
body.fos-dark .dvt-sms-uyari-sablon { background: #451a03; border-color: #78350f; color: #fde68a; }
body.fos-dark .dvt-sms-uyari-aciklama { color: var(--fos-dark-text, #e5e7eb); }
body.fos-dark .dvt-sms-uyari-liste li { background: #3b1515; color: #f87171; }

/* ── PORTAL — Davet Onaylandı kilitli ekranı ────────────────── */
.poa-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px 16px;
}
.poa-kart {
    background: #fff;
    border: 1px solid #bbf7d0;
    border-top: 4px solid #16a34a;
    border-radius: 12px;
    padding: 40px 32px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(22,163,74,.10);
}
.poa-ikon   { font-size: 3.5rem; color: #16a34a; margin-bottom: 16px; line-height: 1; }
.poa-baslik { font-size: 1.5rem; font-weight: 700; color: #14532d; margin: 0 0 8px; }
.poa-firma  { font-size: .9rem; font-weight: 600; color: #6b7280; margin-bottom: 16px; }
.poa-aciklama { font-size: .88rem; color: #6b7280; margin: 0 0 12px; line-height: 1.6; }
.poa-tarih  { font-size: .78rem; color: #4b5563; margin-bottom: 16px; }
/* ── Oda bazlı davet özet kartları ─────────────────── */
.poa-oda-kart {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 3px solid #F97316;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    text-align: left;
}
.poa-oda-baslik {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: #15803d;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 6px;
}
.poa-oda-baslik i { color: #F97316; font-size: .9rem; }
.poa-oda-kisi {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    color: #14532d;
    padding: 2px 0 2px 18px;
}
.poa-oda-kisi i { color: #22c55e; font-size: .75rem; }
.poa-oda-bos { color: #9ca3af; font-style: italic; }
.poa-oda-bos i { color: #9ca3af; }
.poa-not {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: left;
}
.poa-not-baslik { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: #15803d; margin-bottom: 6px; }
.poa-not-metin  { font-size: .85rem; color: #14532d; line-height: 1.5; }
/* Dark mode */
body.fos-dark .poa-kart    { background: #0a1f12; border-color: #14532d; border-top-color: #16a34a; }
body.fos-dark .poa-baslik  { color: #86efac; }
body.fos-dark .poa-firma   { color: #9ca3af; }
body.fos-dark .poa-aciklama { color: #9ca3af; }
body.fos-dark .poa-tarih   { color: #6b7280; }
body.fos-dark .poa-oda-kart    { background: #052e16; border-color: #14532d; border-left-color: #F97316; }
body.fos-dark .poa-oda-baslik  { color: #86efac; }
body.fos-dark .poa-oda-kisi    { color: #bbf7d0; }
body.fos-dark .poa-oda-kisi i  { color: #4ade80; }
body.fos-dark .poa-oda-bos     { color: #6b7280; }
body.fos-dark .poa-oda-bos i   { color: #6b7280; }
body.fos-dark .poa-not     { background: #052e16; border-color: #14532d; }
body.fos-dark .poa-not-baslik { color: #86efac; }
body.fos-dark .poa-not-metin  { color: #bbf7d0; }
/* Mobile */
@media (max-width: 576px) {
    .poa-kart { padding: 28px 18px; }
    .poa-ikon { font-size: 2.8rem; }
    .poa-baslik { font-size: 1.25rem; }
    .poa-oda-kart { padding: 8px 10px; }
    .poa-oda-kisi { padding-left: 12px; font-size: .8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   DVT-ACC — Davet Düzenle Oda Yönetimi — Akordeon Tasarım
   Tek kolon, tıkla-aç, kompakt kişi listesi.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   DAVET ODA YÖNETİMİ — Premium Kart Sistemi
   Akordeon oda kartları + kişi satırları + portal
   ═══════════════════════════════════════════════════ */

/* ── Akordeon wrapper ────────────────────────────── */
.dvt-acc { display: flex; flex-direction: column; gap: 8px; }

/* ── Tek oda kartı ───────────────────────────────── */
.dvt-acc-item {
    position: relative;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(148,163,184,.14);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    overflow: visible;
    transition: box-shadow .2s, transform .15s;
}
/* ::before gradient şerit border-radius ile uyumlu — overflow:visible'da köşe taşmasın */
.dvt-acc-item::before { border-radius: 10px 10px 0 0; }
/* Üst gradient şerit — durum rengi */
.dvt-acc-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}
.dvt-acc-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }
/* İptal — gri şerit, soluk */
.dvt-acc-item.dvt-acc-iptal::before { background: linear-gradient(90deg, #9ca3af, #6b7280); }
.dvt-acc-item.dvt-acc-iptal { opacity: .6; }
/* Dolu — yeşil şerit */
.dvt-acc-item.dvt-acc-dolu::before { background: linear-gradient(90deg, #22c55e, #16a34a); }
/* Kısmi — turuncu şerit */
.dvt-acc-item.dvt-acc-uyari::before { background: linear-gradient(90deg, #f59e0b, #d97706); }

/* ── Başlık satırı — tıklanabilir ────────────────── */
.dvt-acc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 10px;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}
.dvt-acc-header:hover { background: rgba(249,115,22,.03); }

/* Oda ikonu + tip adı */
.dvt-acc-tip {
    font-weight: 700;
    font-size: .88rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dvt-acc-tip i { color: #F97316; font-size: .85rem; }

/* Oda meta chip: "2 oda × 3 kişi" */
.dvt-acc-meta {
    font-size: .7rem;
    color: #64748b;
    white-space: nowrap;
    padding: 2px 8px;
    background: rgba(148,163,184,.1);
    border-radius: 10px;
    letter-spacing: .02em;
}

/* Badge'ler — iptal, bebek talep, ekstra hak */
.dvt-acc-badges { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

/* Doluluk progress bar — ince, yuvarlak */
.dvt-acc-bar-wrap {
    flex: 1;
    min-width: 50px;
    max-width: 140px;
    height: 5px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}
.dvt-acc-bar {
    height: 100%;
    border-radius: 3px;
    transition: width .3s cubic-bezier(.4,0,.2,1);
}

/* Doluluk sayaç: "4/6" */
.dvt-acc-sayi {
    font-weight: 700;
    font-size: .8rem;
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Chevron — döner */
.dvt-acc-chevron {
    font-size: .7rem;
    color: #94a3b8;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    margin-left: auto;
    flex-shrink: 0;
}
.dvt-acc-item.dvt-acc-open .dvt-acc-chevron { transform: rotate(180deg); }

/* ── Akordeon gövdesi — açık/kapalı ──────────────── */
.dvt-acc-body {
    display: none;
    padding: 0 16px 14px;
}
.dvt-acc-item.dvt-acc-open .dvt-acc-body { display: block; }

/* ── Aksiyon bar — oda bazlı butonlar ────────────── */
.dvt-acc-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px dashed rgba(148,163,184,.2);
    flex-wrap: wrap;
}

/* ── Kişi listesi ────────────────────────────────── */
.dvt-acc-kisiler { display: flex; flex-direction: column; gap: 5px; }

/* Tek kişi satırı */
.dvt-acc-kisi {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(241,245,249,.7), rgba(241,245,249,.3));
    border-left: 3px solid #f59e0b;
    transition: background .15s, box-shadow .15s;
}
.dvt-acc-kisi:hover { background: rgba(241,245,249,.95); box-shadow: 0 1px 4px rgba(0,0,0,.04); }
/* Tüm bilgiler tamam — yeşil kenar */
.dvt-acc-kisi.dvt-acc-kisi-tam { border-left-color: #22c55e; }

/* Kişi avatar dairesi — baş harfler */
.dvt-acc-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dvt-acc-avatar-ok   { background: linear-gradient(135deg, #22c55e, #16a34a); }
.dvt-acc-avatar-hata { background: linear-gradient(135deg, #f59e0b, #d97706); }

/* Kişi adı */
.dvt-acc-kisi-isim {
    flex: 1;
    min-width: 80px;
    font-weight: 600;
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Durum dot'ları — 3 yuvarlak (TC/TEL/DT) */
.dvt-acc-dots { display: flex; gap: 3px; align-items: center; }
.dvt-acc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dvt-acc-dot-ok   { background: #22c55e; }
.dvt-acc-dot-hata { background: #ef4444; }

/* Portal grubu — link + PIN + kopyala */
.dvt-acc-portal-grp {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
/* Portal açma ikonu */
.dvt-acc-portal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    font-size: .6rem;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.dvt-acc-portal:hover { transform: scale(1.1); box-shadow: 0 2px 6px rgba(14,165,233,.3); color: #fff; }
/* PIN badge */
.dvt-acc-pin {
    font-size: .68rem;
    letter-spacing: 2px;
    font-weight: 700;
    color: #d97706;
    font-family: 'DM Sans', monospace;
    padding: 2px 6px;
    background: rgba(217,119,6,.08);
    border-radius: 4px;
}
/* PIN kopyala butonu */
.dvt-acc-pin-copy {
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(217,119,6,.1);
    color: #d97706;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    transition: background .15s, transform .15s;
    flex-shrink: 0;
}
.dvt-acc-pin-copy:hover { background: rgba(217,119,6,.22); transform: scale(1.1); }

/* Boş oda metni */
.dvt-acc-bos {
    padding: 10px 12px;
    font-style: italic;
    font-size: .8rem;
    text-align: center;
}

/* Kişi ekle paneli */
.dvt-acc-ekle {
    padding: 10px 12px;
    margin-top: 8px;
    background: rgba(249,115,22,.04);
    border: 1px dashed rgba(249,115,22,.25);
    border-radius: 8px;
}
.dvt-acc-ekle form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.dvt-acc-ekle-uyari {
    font-size: .72rem;
    color: #d97706;
    margin-bottom: 4px;
}

/* ═══ Portal Erişim Kartı (sağ panel) ════════════ */
.dvt-portal {
    padding: 10px 14px;
    border-top: 1px solid var(--fos-border);
}
.dvt-portal-baslik {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #F97316;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.dvt-portal-baslik i { font-size: .72rem; }
/* Link / PIN satırı */
.dvt-portal-satir {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: rgba(241,245,249,.6);
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 8px;
    margin-bottom: 6px;
}
.dvt-portal-ikon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    flex-shrink: 0;
}
.dvt-portal-ikon-link { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #fff; }
.dvt-portal-ikon-pin  { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
/* Kısa URL kodu */
.dvt-portal-kod {
    flex: 1;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #0ea5e9;
}
/* PIN rakamları */
.dvt-portal-pin {
    flex: 1;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #d97706;
    font-family: 'DM Sans', monospace;
}
/* İkon butonları (kopyala / aç) */
.dvt-portal-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(148,163,184,.18);
    background: #fff;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    text-decoration: none;
    transition: all .15s;
    flex-shrink: 0;
}
.dvt-portal-btn:hover { background: #f8fafc; color: #0f172a; border-color: rgba(148,163,184,.3); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.dvt-portal-btn-go:hover { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
/* SMS satırı */
.dvt-portal-sms {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

/* ═══ Dark Mode ══════════════════════════════════ */
body.fos-dark .dvt-acc-item { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
body.fos-dark .dvt-acc-header:hover { background: rgba(249,115,22,.05); }
body.fos-dark .dvt-acc-actions { border-bottom-color: rgba(255,255,255,.06); }
body.fos-dark .dvt-acc-kisi { background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
body.fos-dark .dvt-acc-kisi:hover { background: rgba(255,255,255,.06); }
body.fos-dark .dvt-acc-ekle { background: rgba(249,115,22,.05); border-color: rgba(249,115,22,.18); }
body.fos-dark .dvt-acc-bar-wrap { background: #334155; }
body.fos-dark .dvt-acc-meta { color: #94a3b8; background: rgba(255,255,255,.06); }
body.fos-dark .dvt-acc-pin { background: rgba(217,119,6,.12); }
body.fos-dark .dvt-acc-pin-copy { background: rgba(217,119,6,.15); }
body.fos-dark .dvt-portal-satir { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.fos-dark .dvt-portal-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #94a3b8; }
body.fos-dark .dvt-portal-btn:hover { background: rgba(255,255,255,.1); color: #e2e8f0; }

/* ═══ Mobile ═════════════════════════════════════ */
@media (max-width: 768px) {
    .dvt-acc-header { padding: 10px 12px 8px; gap: 6px; flex-wrap: wrap; }
    .dvt-acc-bar-wrap { max-width: 80px; }
    .dvt-acc-body { padding: 0 12px 10px; }
    .dvt-acc-kisi { padding: 5px 8px; gap: 5px; }
    .dvt-acc-avatar { width: 26px; height: 26px; font-size: .56rem; }
    .dvt-acc-kisi-isim { min-width: 60px; font-size: .78rem; }
    .dvt-acc-dot { width: 6px; height: 6px; }
    .dvt-acc-portal-grp { gap: 3px; }
    .dvt-acc-portal, .dvt-acc-pin-copy { width: 20px; height: 20px; font-size: .55rem; }
    .dvt-acc-pin { font-size: .62rem; letter-spacing: 1px; }
    .dvt-acc-ekle { padding: 8px 10px; }
    .dvt-acc-actions { gap: 4px; }
    .dvt-portal-satir { padding: 6px 8px; }
    .dvt-portal-btn { width: 24px; height: 24px; }
    .dvt-portal-pin { font-size: .8rem; letter-spacing: 2px; }
}

/* ─── DAVET INDEX İSTATİSTİK KARTLARI ─────────────────────── */
/* Özet kartlar — ikon + değer + etiket */
.dvt-stat-kart {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 10px;
    background: var(--fos-card-bg, #fff);
    border: 1px solid var(--fos-border, #e2e8f0);
    border-left: 3px solid #F97316;
    height: 100%;
}
.dvt-stat-ikon {
    width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.dvt-stat-icerik { min-width: 0; }
.dvt-stat-deger { font-size: 1.4rem; font-weight: 800; line-height: 1.15; color: var(--fos-text, #1e293b); }
.dvt-stat-alt { font-size: .85rem; font-weight: 500; color: var(--fos-text-muted, #94a3b8); margin-left: 2px; }
.dvt-stat-etiket { font-size: .72rem; font-weight: 600; color: var(--fos-text-muted, #94a3b8); text-transform: uppercase; letter-spacing: .03em; }
/* Durum dağılım bar */
.dvt-stat-durum-bar {
    display: flex; height: 26px; border-radius: 6px; overflow: hidden;
    background: var(--fos-border, #e2e8f0);
}
/* İptal / red detay chip'leri — kart içi */
.dvt-stat-detay { display: flex; gap: 4px; margin-top: 2px; }
.dvt-stat-chip {
    font-size: .65rem; font-weight: 600; padding: 1px 5px; border-radius: 4px;
    display: inline-flex; align-items: center; gap: 2px;
}
.dvt-chip-iptal { color: #9ca3af; background: rgba(156,163,175,.12); }
.dvt-chip-red   { color: #ef4444; background: rgba(239,68,68,.1); }
body.fos-dark .dvt-chip-iptal { color: #9ca3af; background: rgba(156,163,175,.2); }
body.fos-dark .dvt-chip-red   { color: #f87171; background: rgba(239,68,68,.2); }
.dvt-stat-seg {
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; color: #fff;
    min-width: 24px;
}
.dvt-seg-onay     { background: #22c55e; }
.dvt-seg-personel { background: #f59e0b; }
.dvt-seg-sms      { background: #0ea5e9; }
.dvt-seg-taslak   { background: #94a3b8; }
.dvt-seg-red      { background: #ef4444; }
/* Dark */
body.fos-dark .dvt-stat-kart { background: var(--fos-dark-card, #1e293b); border-color: var(--fos-dark-border, #334155); }
body.fos-dark .dvt-stat-deger { color: var(--fos-dark-text, #f1f5f9); }
body.fos-dark .dvt-stat-durum-bar { background: var(--fos-dark-border, #334155); }
/* Mobile */
@media (max-width: 768px) {
    .dvt-stat-kart { padding: 10px 12px; gap: 8px; }
    .dvt-stat-ikon { width: 34px; height: 34px; font-size: 1rem; }
    .dvt-stat-deger { font-size: 1.15rem; }
    .dvt-stat-durum-bar { height: 22px; }
    .dvt-stat-seg { font-size: .6rem; min-width: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   ODA GİRİŞ OPERASYON MERKEZİ — oda-op-* bileşenleri
   Tek ekran: hak kontrolü + oda giriş + kişi yönetimi
   ═══════════════════════════════════════════════════════════════ */

/* ── Üst bar — otel + firma arama ──────────────────────────── */
.oda-op-bar {
    display: flex; gap: 12px; align-items: flex-end;
    padding: 14px 18px; margin-bottom: 12px;
    background: var(--fos-light-card, #fff);
    border: 1px solid var(--fos-border, #e2e8f0);
    border-radius: 10px;
    border-left: 3px solid #F97316;
}
.oda-op-bar-bolum { display: flex; flex-direction: column; gap: 4px; flex: 1; }

/* Firma arama wrapper — autocomplete */
.oda-op-arama-wrap { position: relative; }
.oda-op-arama-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--fos-text-muted, #94a3b8); font-size: .85rem; pointer-events: none;
}
.oda-op-arama-wrap .fos-input { padding-left: 32px; }

/* Autocomplete dropdown */
.oda-op-arama-liste {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: var(--fos-light-card, #fff);
    border: 1px solid var(--fos-border, #e2e8f0);
    border-radius: 8px; margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 240px; overflow-y: auto;
}
.oda-op-arama-liste:empty { display: none; }
.oda-op-arama-item {
    padding: 8px 12px; cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: background .15s;
}
.oda-op-arama-item:hover { background: rgba(249,115,22,.06); }
.oda-op-arama-item:last-child { border-bottom: none; }
.oda-op-arama-bos { padding: 12px; text-align: center; color: var(--fos-text-muted); font-size: .8rem; }

/* ── Hızlı cari ekle paneli ────────────────────────────────── */
.oda-op-hizli-panel {
    margin-bottom: 12px; padding: 12px 16px;
    background: rgba(249,115,22,.04);
    border: 1px solid rgba(249,115,22,.2);
    border-radius: 8px;
}
.oda-op-hizli-baslik {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 700; color: #F97316;
    margin-bottom: 10px;
}
.oda-op-hizli-kapat {
    margin-left: auto; background: none; border: none;
    color: var(--fos-text-muted); cursor: pointer; font-size: .9rem;
}
.oda-op-hizli-kapat:hover { color: #dc2626; }
.oda-op-hizli-icerik { }

/* ── Firma bilgi + hak durumu bandı ────────────────────────── */
.oda-op-cari-bilgi {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    padding: 10px 16px; margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(14,165,233,.06), rgba(249,115,22,.06));
    border: 1px solid rgba(14,165,233,.15);
    border-radius: 8px;
}
.oda-op-cari-sol { display: flex; align-items: center; gap: 8px; font-size: .85rem; flex-wrap: wrap; }
.oda-op-cari-sol i { color: #0ea5e9; font-size: 1.1rem; }

/* Hak durumu wrap — sağ taraf */
.oda-op-hak-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oda-op-hak-stand {
    font-size: .75rem; color: var(--fos-text-muted);
    display: flex; align-items: center; gap: 4px;
}
.oda-op-hak-stand i { color: #F97316; font-size: .8rem; }

/* Hak kutusu — oda/kişi hakkı */
.oda-op-hak-kutu {
    display: flex; flex-direction: column; align-items: center;
    padding: 4px 12px; border-radius: 6px;
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.06);
    min-width: 60px;
}
.oda-op-hak-etiket { font-size: .6rem; font-weight: 600; text-transform: uppercase; color: var(--fos-text-muted); letter-spacing: .5px; }
.oda-op-hak-deger { font-size: .85rem; font-weight: 700; color: #16a34a; }
.oda-op-hak-asim { color: #dc2626 !important; }

/* Davet hak kutusu — onaylı/aktarılmış davet varsa görünür, oda tipi adet özeti */
.oda-op-hak-kutu-davet {
    background: rgba(34, 197, 94, .07);
    border-color: rgba(34, 197, 94, .25);
}
.oda-op-hak-kutu-davet .oda-op-hak-etiket { color: #15803d; }
.oda-op-hak-kutu-davet .oda-op-hak-etiket i { margin-right: 2px; }
.oda-op-hak-davet {
    color: #15803d !important;
    font-size: .78rem;
    letter-spacing: .2px;
    white-space: nowrap;
}

/* ── Oda kartları grid ─────────────────────────────────────── */
.oda-op-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 14px;
}
.oda-op-bos { grid-column: 1 / -1; text-align: center; padding: 40px 20px; }

/* ── Tek oda kartı ─────────────────────────────────────────── */
.oda-op-kart {
    background: var(--fos-light-card, #fff);
    border: 1px solid var(--fos-border, #e2e8f0);
    border-radius: 10px;
    overflow: visible;
    transition: box-shadow .2s;
}
.oda-op-kart:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
/* Sol kenar renkleri — durum bazlı */
.oda-op-kart-dolu  { border-left: 3px solid #0ea5e9; }
.oda-op-kart-bos   { border-left: 3px solid #94a3b8; }
.oda-op-kart-giris { border-left: 3px solid #22c55e; }
.oda-op-kart-cikis { border-left: 3px solid #6b7280; opacity: .6; }
.oda-op-kart-cikis:hover { opacity: .85; }

/* Kart başlık — 2 satırlı yapı: üst(sıra+durum+sil) + alt(oda tipi+oda no) */
.oda-op-kart-header {
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(249,115,22,.04), rgba(251,191,36,.02));
    border-bottom: 1px solid var(--fos-border, #e2e8f0);
}

/* Satır 1: sıra + kişi badge + durum + aksiyonlar + sil */
.oda-op-kart-ust {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.oda-op-kart-sira {
    font-size: .65rem; font-weight: 700; color: var(--fos-text-muted);
    background: rgba(0,0,0,.04); padding: 2px 6px; border-radius: 4px;
    flex-shrink: 0;
}

/* Kişi sayısı badge */
.oda-op-kisi-badge {
    font-size: .65rem; font-weight: 600; color: var(--fos-text-muted);
    background: rgba(0,0,0,.04); padding: 2px 6px; border-radius: 4px;
    white-space: nowrap; display: flex; align-items: center; gap: 3px;
}

/* Durum + aksiyon butonları */
.oda-op-kart-durum {
    display: flex; align-items: center; gap: 6px;
    margin-left: auto; flex-shrink: 0;
}

/* Sil butonu — satır 1 sağ uçta */
.oda-op-kart-sil {
    background: none; border: none; color: var(--fos-text-muted);
    cursor: pointer; padding: 4px; font-size: .85rem; border-radius: 4px;
    transition: color .15s, background .15s; flex-shrink: 0;
}
.oda-op-kart-sil:hover { color: #dc2626; background: rgba(220,38,38,.08); }
/* Register yazdır butonu — kart header'da */
.oda-op-kart-yazdir {
    background: none; border: none; color: var(--fos-text-muted);
    cursor: pointer; padding: 4px; font-size: .85rem; border-radius: 4px;
    transition: color .15s, background .15s; flex-shrink: 0;
}
.oda-op-kart-yazdir:hover { color: #F97316; background: rgba(249,115,22,.08); }
/* Masraf panel aç butonu — kart header'da */
.oda-op-kart-masraf {
    background: none; border: none; color: var(--fos-text-muted);
    cursor: pointer; padding: 4px; font-size: .85rem; border-radius: 4px;
    transition: color .15s, background .15s; flex-shrink: 0;
}
.oda-op-kart-masraf:hover { color: #F97316; background: rgba(249,115,22,.08); }

/* ── Masraf paneli — oda kartı içinde, başlangıçta gizli ───── */
.oda-op-masraf-panel {
    border-top: 1px solid var(--fos-border, #e2e8f0);
    padding: 10px 12px; margin-top: 6px;
}
.oda-op-masraf-baslik {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .3px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.oda-op-masraf-toplam { margin-left: auto; }
.oda-op-masraf-liste { margin-bottom: 10px; }
.oda-op-masraf-satir {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 0; border-bottom: 1px solid var(--fos-border-light, #f1f5f9);
}
.oda-op-masraf-satir:last-child { border-bottom: none; }
.oda-op-masraf-ekle { padding-top: 8px; border-top: 1px dashed var(--fos-border, #e2e8f0); }

/* ── Dark mode ────────────────────────────────────────────── */
body.fos-dark .oda-op-kart-masraf { color: rgba(255,255,255,.4); }
body.fos-dark .oda-op-kart-masraf:hover { color: #F97316; background: rgba(249,115,22,.12); }
body.fos-dark .oda-op-masraf-panel { border-color: var(--fos-dark-border, #334155); }
body.fos-dark .oda-op-masraf-satir { border-color: var(--fos-dark-border, #1e293b); }
body.fos-dark .oda-op-masraf-ekle { border-color: var(--fos-dark-border, #334155); }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .oda-op-masraf-satir { flex-wrap: wrap; gap: 4px; }
    .oda-op-masraf-ekle .d-flex { flex-direction: column; }
    .oda-op-masraf-ekle .d-flex > * { width: 100% !important; min-width: unset !important; }
}

/* Satır 2: oda tipi select + oda no input */
.oda-op-kart-alt {
    display: flex; align-items: center; gap: 8px;
}
/* fos-select kart içinde — kompakt */
.oda-op-kart-alt .fos-sel { flex: 1; min-width: 0; }
.oda-op-kart-alt .fos-sel-trigger { font-size: .75rem; padding: 4px 8px; min-height: 28px; }
.oda-op-kart-alt .fos-sel-dropdown { min-width: 280px; }
.oda-op-kart-alt .fos-sel-opt { font-size: .75rem; padding: 4px 8px; }
.oda-op-kart-odano {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

/* Kişi listesi */
.oda-op-kisiler { padding: 8px 14px 4px; }

/* Tek kişi satırı */
.oda-op-kisi {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; margin-bottom: 4px;
    border-radius: 6px; background: rgba(0,0,0,.015);
    transition: background .15s;
}
.oda-op-kisi:hover { background: rgba(0,0,0,.03); }
.oda-op-kisi-bekle { opacity: .6; }
/* Çıkış yapmış kişi — soluk + üstü çizili */
.oda-op-kisi-cikmis { opacity: .45; }
.oda-op-kisi-cikmis .oda-op-kisi-isim { text-decoration: line-through; }
/* Çıkış yapmış kişi badge */
.oda-op-cikmis-badge {
    font-size: .6rem; font-weight: 600; color: #64748b;
    background: rgba(100,116,139,.08); padding: 2px 6px; border-radius: 4px;
    white-space: nowrap;
}
/* Kişi geldi butonu — yeşil */
.oda-op-kisi-geldi {
    background: none; border: none; color: #16a34a;
    cursor: pointer; padding: 2px 4px; font-size: .7rem;
    transition: color .15s; position: relative; z-index: 1051;
}
.oda-op-kisi-geldi:hover { color: #15803d; }
/* Kişi çıkış iptal butonu — turuncu */
.oda-op-kisi-ciptal {
    background: none; border: none; color: #d97706;
    cursor: pointer; padding: 2px 4px; font-size: .7rem;
    transition: color .15s; position: relative; z-index: 1051;
}
.oda-op-kisi-ciptal:hover { color: #b45309; }

/* Avatar */
.oda-op-kisi-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    flex-shrink: 0; text-transform: uppercase;
}
/* Noname avatar — gri tonlu, soru işareti */
.oda-op-kisi-noname {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    font-style: italic;
}

/* Giriş sıra numarası badge */
.oda-op-kisi-sira {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    font-size: .55rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #F97316, #FBBF24);
    flex-shrink: 0; line-height: 1;
}

/* Kişi bilgileri */
.oda-op-kisi-bilgi { flex: 1; min-width: 0; }
.oda-op-kisi-isim { font-size: .82rem; font-weight: 600; line-height: 1.2; }
.oda-op-kisi-detay { font-size: .7rem; color: var(--fos-text-muted); line-height: 1.3; }

/* Sonra gelecek badge */
.oda-op-bekle-badge {
    font-size: .6rem; font-weight: 600; color: #d97706;
    background: rgba(217,119,6,.08); padding: 2px 6px; border-radius: 4px;
    white-space: nowrap;
}

/* Kişi çıkar butonu — z-index: fos-sel-dropdown(1050) üstünde kalması için */
.oda-op-kisi-cikar {
    background: none; border: none; color: var(--fos-text-muted);
    cursor: pointer; padding: 2px; font-size: .7rem;
    transition: color .15s;
    position: relative;
    z-index: 1051;
}
.oda-op-kisi-cikar:hover { color: #dc2626; }

/* ── Kişi ekle bölümü — mod seçici + formlar ──────────────── */
.oda-op-kisi-ekle { padding: 8px 14px 12px; border-top: 1px dashed var(--fos-border, #e2e8f0); }

/* Mod seçici — listeden seç / elle giriş toggle */
.oda-op-mod-sec {
    display: flex; gap: 4px; margin-bottom: 8px;
}
.oda-op-mod-btn {
    font-size: .65rem; font-weight: 600; padding: 3px 10px;
    border: 1px solid var(--fos-border, #e2e8f0); border-radius: 4px;
    background: transparent; color: var(--fos-text-muted);
    cursor: pointer; transition: all .15s;
    display: flex; align-items: center; gap: 4px;
}
.oda-op-mod-btn:hover { border-color: #F97316; color: #F97316; }
.oda-op-mod-btn.aktif {
    background: rgba(249,115,22,.1); border-color: rgba(249,115,22,.3);
    color: #F97316;
}

/* Mod panelleri */
.oda-op-ekle-mod { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Listeden seç — personel dropdown (fos-select kart içi kompakt) */
.oda-op-ekle-mod .fos-sel { flex: 1; min-width: 160px; max-width: 340px; }
.oda-op-ekle-mod .fos-sel-trigger { font-size: .78rem; padding: 4px 8px; min-height: 28px; }
.oda-op-ekle-mod .fos-sel-dropdown { min-width: 300px; }
.oda-op-ekle-mod .fos-sel-opt { font-size: .78rem; padding: 4px 8px; }

/* Elle giriş — satır formu */
.oda-op-kisi-ekle-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.oda-op-kisi-ekle-row .fos-input { flex: 1; min-width: 80px; }
.oda-op-kisi-ekle-row .oda-op-tc { max-width: 130px; }
.oda-op-kisi-ekle-row .oda-op-ad { max-width: 120px; }
.oda-op-kisi-ekle-row .oda-op-soyad { max-width: 120px; }
.oda-op-kisi-ekle-row .oda-op-dt { max-width: 140px; }
.oda-op-kisi-ekle-row .oda-op-tel { max-width: 120px; }

/* Sonra gelecek checkbox */
.oda-op-sonra {
    display: flex; align-items: center; gap: 4px;
    font-size: .7rem; color: var(--fos-text-muted); white-space: nowrap;
    cursor: pointer;
}

/* ── Oda ekle bar ──────────────────────────────────────────── */
.oda-op-ekle-bar { margin-top: 14px; text-align: center; }
.oda-op-ekle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 24px; border: 2px dashed var(--fos-border, #e2e8f0);
    border-radius: 10px; background: transparent;
    color: var(--fos-text-muted); font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: all .2s;
}
.oda-op-ekle-btn:hover {
    border-color: #F97316; color: #F97316;
    background: rgba(249,115,22,.04);
}

/* ═══ DARK MODE — oda-op ═════════════════════════════════════ */
body.fos-dark .oda-op-bar { background: var(--fos-dark-card); border-color: rgba(255,255,255,.08); }
body.fos-dark .oda-op-arama-liste { background: var(--fos-dark-card); border-color: rgba(255,255,255,.1); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
body.fos-dark .oda-op-arama-item:hover { background: rgba(249,115,22,.1); }
body.fos-dark .oda-op-hizli-panel { background: rgba(249,115,22,.06); border-color: rgba(249,115,22,.15); }
body.fos-dark .oda-op-cari-bilgi { background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(249,115,22,.08)); border-color: rgba(14,165,233,.1); }
body.fos-dark .oda-op-hak-kutu { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
body.fos-dark .oda-op-hak-kutu-davet { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .35); }
body.fos-dark .oda-op-hak-kutu-davet .oda-op-hak-etiket { color: #4ade80; }
body.fos-dark .oda-op-hak-davet { color: #4ade80 !important; }
body.fos-dark .oda-op-kart { background: var(--fos-dark-card); border-color: rgba(255,255,255,.08); }
body.fos-dark .oda-op-kart:hover { box-shadow: 0 4px 16px rgba(0,0,0,.3); }
body.fos-dark .oda-op-kart-header { background: rgba(249,115,22,.06); border-color: rgba(255,255,255,.06); }
body.fos-dark .oda-op-kart-sira { background: rgba(255,255,255,.06); }
body.fos-dark .oda-op-kart-yazdir { color: rgba(255,255,255,.4); }
body.fos-dark .oda-op-kart-yazdir:hover { color: #F97316; background: rgba(249,115,22,.12); }
body.fos-dark .oda-op-kisi-badge { background: rgba(255,255,255,.06); }
body.fos-dark .oda-op-kisi { background: rgba(255,255,255,.03); }
body.fos-dark .oda-op-kisi:hover { background: rgba(255,255,255,.05); }
body.fos-dark .oda-op-kisi-ekle { border-color: rgba(255,255,255,.06); }
body.fos-dark .oda-op-mod-btn { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.4); }
body.fos-dark .oda-op-mod-btn.aktif { background: rgba(249,115,22,.15); border-color: rgba(249,115,22,.3); color: #fb923c; }
body.fos-dark .oda-op-ekle-btn { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.4); }
body.fos-dark .oda-op-ekle-btn:hover { border-color: #F97316; color: #F97316; background: rgba(249,115,22,.06); }
body.fos-dark .oda-op-cikmis-badge { color: #94a3b8; background: rgba(148,163,184,.1); }
body.fos-dark .oda-op-kisi-geldi { color: #4ade80; }
body.fos-dark .oda-op-kisi-geldi:hover { color: #22c55e; }
body.fos-dark .oda-op-kisi-ciptal { color: #fbbf24; }
body.fos-dark .oda-op-kisi-ciptal:hover { color: #f59e0b; }
body.fos-dark .oda-op-kisi-noname { background: linear-gradient(135deg, #475569, #334155); }
body.fos-dark .oda-op-kisi-sira { background: linear-gradient(135deg, #ea580c, #d97706); }

/* ═══ MOBILE — oda-op ════════════════════════════════════════ */
@media (max-width: 768px) {
    .oda-op-bar { flex-direction: column; gap: 8px; padding: 10px 12px; }
    .oda-op-cari-bilgi { flex-direction: column; gap: 8px; align-items: flex-start; }
    .oda-op-hak-wrap { width: 100%; justify-content: flex-start; }
    .oda-op-grid { grid-template-columns: 1fr; gap: 10px; }
    .oda-op-kart-ust { flex-wrap: wrap; gap: 6px; }
    .oda-op-kart-alt { flex-direction: column; gap: 6px; }
    .oda-op-kart-alt .fos-sel { max-width: 100%; }
    .oda-op-kart-odano { width: 100%; }
    .oda-op-kart-odano label { display: none; }
    .oda-op-kisi-ekle-row { gap: 4px; }
    .oda-op-kisi-ekle-row .fos-input { min-width: 60px; }
    .oda-op-ekle-mod .fos-sel { max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   CARİ DETAY DRAWER PANELİ — oda-cdp-* bileşenleri
   Sağdan kayan panel, firma detayları. Modüler bölüm yapısı.
   ═══════════════════════════════════════════════════════════════ */

/* ── Backdrop — panel açıkken arka planı karartır ─────────────── */
.oda-cdp-backdrop {
    position: fixed; inset: 0; z-index: 1040;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.oda-cdp-backdrop.acik { opacity: 1; visibility: visible; }

/* ── Panel container — sağdan kayar ──────────────────────────── */
.oda-cdp-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050;
    width: 420px; max-width: 92vw;
    background: var(--fos-light-surface, #fff);
    border-left: 3px solid;
    border-image: linear-gradient(180deg, #F97316, #FBBF24) 1;
    box-shadow: -8px 0 30px rgba(0,0,0,.12);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.oda-cdp-panel.acik { transform: translateX(0); }

/* ── Panel header — turuncu gradient ─────────────────────────── */
.oda-cdp-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(249,115,22,.08), rgba(251,191,36,.05));
    border-bottom: 1px solid var(--fos-border, #dee2e6);
    flex-shrink: 0;
}
.oda-cdp-header i { color: #F97316; font-size: 18px; }
.oda-cdp-baslik {
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .3px; color: var(--fos-text, #1e293b);
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oda-cdp-kapat {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--fos-text-muted, #64748b); font-size: 18px; line-height: 1;
    border-radius: 4px; transition: background .15s;
}
.oda-cdp-kapat:hover { background: rgba(0,0,0,.06); }

/* ── Panel body — scrollable bölümler ────────────────────────── */
.oda-cdp-body {
    flex: 1; overflow-y: auto; padding: 16px 18px;
    scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.oda-cdp-body::-webkit-scrollbar { width: 5px; }
.oda-cdp-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Bölüm wrapper ──────────────────────────────────────────── */
.oda-cdp-bolum {
    margin-bottom: 16px;
    border: 1px solid var(--fos-border, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
}
.oda-cdp-bolum-baslik {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(249,115,22,.06), rgba(251,191,36,.03));
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: #F97316;
    border-bottom: 1px solid var(--fos-border, #dee2e6);
}
.oda-cdp-bolum-icerik { padding: 10px 12px; }

/* ── Bilgi grid — label + değer ──────────────────────────────── */
.oda-cdp-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
}
.oda-cdp-alan { display: flex; flex-direction: column; gap: 1px; }
.oda-cdp-alan.tam { grid-column: 1 / -1; }
.oda-cdp-etiket {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .3px; color: var(--fos-text-muted, #94a3b8);
}
.oda-cdp-deger {
    font-size: 13px; color: var(--fos-text, #1e293b);
    word-break: break-word;
}
.oda-cdp-deger:empty::after { content: '—'; color: var(--fos-text-muted, #94a3b8); }

/* ── Stat kartları — sayısal kutular ─────────────────────────── */
.oda-cdp-stat-row { display: flex; gap: 8px; flex-wrap: wrap; }
.oda-cdp-stat {
    flex: 1; min-width: 70px;
    text-align: center; padding: 8px 6px;
    border-radius: 6px;
    background: var(--fos-light-base, #f1f5f9);
    border: 1px solid var(--fos-border, #e2e8f0);
}
.oda-cdp-stat-sayi {
    font-size: 20px; font-weight: 700;
    color: var(--fos-text, #1e293b); line-height: 1.1;
}
.oda-cdp-stat-etiket {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    color: var(--fos-text-muted, #94a3b8); margin-top: 2px;
}
.oda-cdp-stat.vurgu { border-color: #F97316; background: rgba(249,115,22,.06); }
.oda-cdp-stat.vurgu .oda-cdp-stat-sayi { color: #F97316; }
.oda-cdp-stat.uyari { border-color: #ef4444; background: rgba(239,68,68,.05); }
.oda-cdp-stat.uyari .oda-cdp-stat-sayi { color: #ef4444; }

/* ── Not kutusu — çok satırlı metin ─────────────────────────── */
.oda-cdp-not {
    font-size: 12px; color: var(--fos-text, #475569);
    background: rgba(249,115,22,.04);
    border: 1px dashed rgba(249,115,22,.3);
    border-radius: 6px; padding: 8px 10px;
    white-space: pre-wrap; line-height: 1.5;
}

/* ── Stand mini tablo ────────────────────────────────────────── */
.oda-cdp-mini-tablo { width: 100%; font-size: 12px; border-collapse: collapse; }
.oda-cdp-mini-tablo th {
    text-align: left; font-weight: 600; font-size: 10px;
    text-transform: uppercase; color: var(--fos-text-muted, #94a3b8);
    padding: 4px 6px; border-bottom: 1px solid var(--fos-border, #e2e8f0);
}
.oda-cdp-mini-tablo td {
    padding: 4px 6px; border-bottom: 1px solid var(--fos-border-light, #f1f5f9);
    color: var(--fos-text, #1e293b);
}

/* ── Loading spinner ─────────────────────────────────────────── */
.oda-cdp-yukle {
    display: flex; align-items: center; justify-content: center;
    padding: 40px; color: var(--fos-text-muted, #94a3b8);
}
.oda-cdp-yukle i { animation: oda-cdp-spin 1s linear infinite; font-size: 24px; }
@keyframes oda-cdp-spin { to { transform: rotate(360deg); } }

/* ── Dark mode ───────────────────────────────────────────────── */
body.fos-dark .oda-cdp-backdrop { background: rgba(0, 0, 0, 0.55); }
body.fos-dark .oda-cdp-panel {
    background: var(--fos-dark-card, #1e293b);
    box-shadow: -8px 0 30px rgba(0,0,0,.4);
}
body.fos-dark .oda-cdp-header { border-color: var(--fos-dark-border, #334155); }
body.fos-dark .oda-cdp-baslik { color: var(--fos-dark-text, #e2e8f0); }
body.fos-dark .oda-cdp-kapat { color: var(--fos-dark-text-muted, #94a3b8); }
body.fos-dark .oda-cdp-kapat:hover { background: rgba(255,255,255,.08); }
body.fos-dark .oda-cdp-body::-webkit-scrollbar-thumb { background: #475569; }
body.fos-dark .oda-cdp-bolum { border-color: var(--fos-dark-border, #334155); }
body.fos-dark .oda-cdp-bolum-baslik { border-color: var(--fos-dark-border, #334155); }
body.fos-dark .oda-cdp-etiket { color: var(--fos-dark-text-muted, #64748b); }
body.fos-dark .oda-cdp-deger { color: var(--fos-dark-text, #e2e8f0); }
body.fos-dark .oda-cdp-deger:empty::after { color: var(--fos-dark-text-muted, #64748b); }
body.fos-dark .oda-cdp-stat {
    background: var(--fos-dark-base, #0f172a);
    border-color: var(--fos-dark-border, #334155);
}
body.fos-dark .oda-cdp-stat-sayi { color: var(--fos-dark-text, #e2e8f0); }
body.fos-dark .oda-cdp-stat-etiket { color: var(--fos-dark-text-muted, #64748b); }
body.fos-dark .oda-cdp-stat.vurgu { border-color: #F97316; background: rgba(249,115,22,.1); }
body.fos-dark .oda-cdp-stat.uyari { border-color: #ef4444; background: rgba(239,68,68,.08); }
body.fos-dark .oda-cdp-not {
    color: var(--fos-dark-text, #cbd5e1);
    background: rgba(249,115,22,.08);
    border-color: rgba(249,115,22,.25);
}
body.fos-dark .oda-cdp-mini-tablo th { color: var(--fos-dark-text-muted, #64748b); border-color: var(--fos-dark-border, #334155); }
body.fos-dark .oda-cdp-mini-tablo td { color: var(--fos-dark-text, #e2e8f0); border-color: var(--fos-dark-border, #1e293b); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .oda-cdp-panel { width: 100%; max-width: 100%; }
    .oda-cdp-grid { grid-template-columns: 1fr; }
    .oda-cdp-stat-row { flex-direction: column; }
    .oda-cdp-stat { min-width: unset; }
}


/* ═══════════════════════════════════════════════════════════════
   DAVET İMPORT DİALOGU + UYARI BANDI — oda-dvt-* bileşenleri
   Cari seçilince onaylı davet varsa gösterilir.
   ═══════════════════════════════════════════════════════════════ */

/* ── Davet drawer panel — cdp ile aynı yapı, yeşil accent ───── */
.oda-dvt-panel {}
.oda-dvt-header {
    background: linear-gradient(135deg, rgba(34,197,94,.12) 0%, rgba(249,115,22,.08) 100%) !important;
}
.oda-dvt-header i:first-child { color: #22c55e; }

/* ── Özet bar — toplam oda + personel ────────────────────────── */
.oda-dvt-ozet {
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    color: #15803d;
    font-weight: 600;
}
.oda-dvt-ozet i { color: #F97316; margin-right: 2px; }

/* ── DOH kart — her oda hakkı bir kart ───────────────────────── */
.oda-dvt-kart {
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-left: 3px solid #F97316;
    transition: background .2s, border-color .2s;
}
/* Import edilmiş kart — yeşil tema */
.oda-dvt-kart-eklendi {
    background: #f0fdf4;
    border-color: #bbf7d0;
    border-left-color: #22c55e;
}

/* ── Kart başlık — tip + adet + buton ────────────────────────── */
.oda-dvt-kart-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.oda-dvt-kart-tip { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.oda-dvt-kart-adet {
    font-weight: 700;
    color: #F97316;
    min-width: 24px;
}

/* ── Kart kişi listesi ───────────────────────────────────────── */
.oda-dvt-kart-kisiler {
    padding-left: 6px;
    border-left: 2px solid #e2e8f0;
}
.oda-dvt-kisi {
    font-size: 12px;
    color: #475569;
    padding: 1px 0;
}
.oda-dvt-kisi i { color: #94a3b8; margin-right: 4px; font-size: 11px; }
.oda-dvt-kart-eklendi .oda-dvt-kart-kisiler { border-left-color: #bbf7d0; }

/* ── Dark mode override ──────────────────────────────────────── */
body.fos-dark .oda-dvt-ozet {
    background: rgba(34,197,94,.08);
    border-color: rgba(34,197,94,.2);
    color: #86efac;
}
body.fos-dark .oda-dvt-kart {
    background: var(--fos-dark-card, #1e293b);
    border-color: var(--fos-dark-border, #334155);
    border-left-color: #F97316;
}
body.fos-dark .oda-dvt-kart-eklendi {
    background: rgba(34,197,94,.08);
    border-color: rgba(34,197,94,.2);
    border-left-color: #22c55e;
}
body.fos-dark .oda-dvt-kart-kisiler { border-left-color: var(--fos-dark-border, #334155); }
body.fos-dark .oda-dvt-kisi { color: var(--fos-dark-text-muted, #94a3b8); }
body.fos-dark .oda-dvt-kisi i { color: #64748b; }
body.fos-dark .oda-dvt-kart-eklendi .oda-dvt-kart-kisiler { border-left-color: rgba(34,197,94,.25); }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .oda-dvt-kart-baslik { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   OTO DAVET KARŞILAMA — COMPACT INLINE TOGGLE
   ═══════════════════════════════════════════════════════════════ */
/* Cari bandı içinde inline — butonlar arasında oturur */
.oda-op-oto-davet-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(249,115,22,.2);
    background: rgba(249,115,22,.06);
    cursor: default;
    white-space: nowrap;
}

/* Toggle switch — küçük (30×16) */
.oda-op-toggle-wrap {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    flex-shrink: 0;
}
.oda-op-toggle-wrap input { opacity: 0; width: 0; height: 0; }
.oda-op-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #cbd5e1;
    border-radius: 16px;
    transition: background .2s;
}
.oda-op-toggle-slider::before {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    left: 2px; bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
/* Checked — turuncu */
.oda-op-toggle-wrap input:checked + .oda-op-toggle-slider {
    background: linear-gradient(135deg, #F97316, #FBBF24);
}
.oda-op-toggle-wrap input:checked + .oda-op-toggle-slider::before {
    transform: translateX(14px);
}

/* ── Dark Mode ──────────────────────────────────────────────── */
body.fos-dark .oda-op-oto-davet-inline {
    background: rgba(249,115,22,.08);
    border-color: rgba(249,115,22,.18);
}
body.fos-dark .oda-op-toggle-slider { background: #475569; }
body.fos-dark .oda-op-toggle-slider::before { background: #e2e8f0; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .oda-op-oto-davet-inline > span:last-child { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ODA NOTU — Aslı'nın operasyon komutu (Oda ekranı)
   ═══════════════════════════════════════════════════════════════ */

/* ── Light ──────────────────────────────────────────────────── */
.oda-op-not-kutu {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    transition: border-color .2s, background .2s;
}
/* Not doluyken — turuncu accent, dikkat çekici */
.oda-op-not-kutu.oda-op-not-dolu {
    border-color: rgba(249,115,22,.4);
    background: rgba(249,115,22,.06);
}
.oda-op-not-baslik {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;
    margin-bottom: 4px;
}
.oda-op-not-dolu .oda-op-not-baslik { color: #ea580c; }
.oda-op-not-textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    resize: vertical;
    min-height: 36px;
    background: #fff;
    transition: border-color .2s;
}
.oda-op-not-textarea:focus {
    outline: none;
    border-color: #F97316;
    box-shadow: 0 0 0 2px rgba(249,115,22,.12);
}

/* ── Dark Mode ──────────────────────────────────────────────── */
body.fos-dark .oda-op-not-kutu {
    border-color: #334155;
    background: #1e293b;
}
body.fos-dark .oda-op-not-kutu.oda-op-not-dolu {
    border-color: rgba(249,115,22,.35);
    background: rgba(249,115,22,.08);
}
body.fos-dark .oda-op-not-baslik { color: #94a3b8; }
body.fos-dark .oda-op-not-dolu .oda-op-not-baslik { color: #fb923c; }
body.fos-dark .oda-op-not-textarea {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
body.fos-dark .oda-op-not-textarea:focus {
    border-color: #F97316;
    box-shadow: 0 0 0 2px rgba(249,115,22,.15);
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .oda-op-not-kutu { padding: 6px 8px; }
    .oda-op-not-textarea { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   FS-INH — Inhouse Operasyon inline düzenleme stilleri
   ═══════════════════════════════════════════════════════════════ */

/* ── Düzenlenebilir input — tablo içi kompakt ────────────────── */
.FS-inh-edit {
    border: 1px solid transparent;
    background: rgba(249,115,22,.04);
    transition: border-color .15s, background .15s, box-shadow .3s;
    min-width: 70px;
    text-align: center;
}
.FS-inh-edit:focus {
    border-color: #F97316;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(249,115,22,.15);
    outline: none;
}

/* ── Kayıt başarılı flash — yeşil ────────────────────────────── */
.FS-inh-saved {
    animation: fsInhFlash .6s ease;
}
@keyframes fsInhFlash {
    0%   { background: #bbf7d0; border-color: #22c55e; }
    100% { background: rgba(249,115,22,.04); border-color: transparent; }
}

/* ── Kayıt hatası flash — kırmızı ────────────────────────────── */
.FS-inh-error {
    animation: fsInhError .6s ease;
}
@keyframes fsInhError {
    0%   { background: #fecaca; border-color: #ef4444; }
    100% { background: rgba(249,115,22,.04); border-color: transparent; }
}

/* ── Dark Mode ──────────────────────────────────────────────── */
body.fos-dark .FS-inh-edit {
    background: rgba(255,255,255,.04);
    color: #e2e8f0;
}
body.fos-dark .FS-inh-edit:focus {
    background: var(--fos-dark-card, #1e293b);
    border-color: #F97316;
    box-shadow: 0 0 0 2px rgba(249,115,22,.2);
}
@keyframes fsInhFlashDark {
    0%   { background: rgba(34,197,94,.2); border-color: #22c55e; }
    100% { background: rgba(255,255,255,.04); border-color: transparent; }
}
body.fos-dark .FS-inh-saved { animation-name: fsInhFlashDark; }
@keyframes fsInhErrorDark {
    0%   { background: rgba(239,68,68,.2); border-color: #ef4444; }
    100% { background: rgba(255,255,255,.04); border-color: transparent; }
}
body.fos-dark .FS-inh-error { animation-name: fsInhErrorDark; }

/* ── Kişi detay — Inhouse tablo kişi kolonunda kişi bazlı gösterim ── */
.FS-inh-kisi {
    display: flex; align-items: center; gap: 4px;
    font-size: .72rem; line-height: 1.6; white-space: nowrap;
}
/* Çıkış yapmış kişi — soluk + üstü çizili */
.FS-inh-kisi-cikis { opacity: .4; }
.FS-inh-kisi-cikis .FS-inh-kisi-ad { text-decoration: line-through; }
/* Sonra gelecek kişi — soluk */
.FS-inh-kisi-bekle { opacity: .5; }
/* İkon — durum göstergesi */
.FS-inh-kisi-ico { font-size: .65rem; flex-shrink: 0; }
.FS-inh-ico-aktif { color: #16a34a; }
.FS-inh-ico-cikis { color: #94a3b8; }
.FS-inh-ico-bekle { color: #d97706; }
/* Ad soyad */
.FS-inh-kisi-ad { font-weight: 500; }
/* Giriş tarihi — küçük, soluk */
.FS-inh-kisi-tar {
    font-size: .6rem; color: var(--fos-text-muted); margin-left: 2px;
    font-variant-numeric: tabular-nums;
}
/* Dark mode */
body.fos-dark .FS-inh-ico-aktif { color: #4ade80; }
body.fos-dark .FS-inh-ico-cikis { color: #64748b; }
body.fos-dark .FS-inh-ico-bekle { color: #fbbf24; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .FS-inh-edit { min-width: 50px; font-size: 12px; padding: 3px 4px; }
    .FS-inh-kisi { font-size: .65rem; }
}

/* ================================================================
   FS-KPI — Hero KPI Kartları (Patron Bölgesi)
   Toplam oda, toplam gece, toplam tutar — ilk bakışta 3 kritik bilgi
   ================================================================ */

/* ── KPI bar: 3 kart yan yana ─────────────────────────────────── */
.FS-kpi-bar { display: flex; gap: 16px; margin-bottom: 16px; }

/* ── Tek kart ─────────────────────────────────────────────────── */
.FS-kpi-card { flex: 1; display: flex; align-items: center; gap: 14px;
    background: #fff; border-radius: 10px; padding: 18px 22px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .2s; }
.FS-kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* ── İkon dairesi ─────────────────────────────────────────────── */
.FS-kpi-icon { width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #475569; font-size: 20px; }

/* ── Değer + etiket ───────────────────────────────────────────── */
.FS-kpi-body { display: flex; flex-direction: column; }
.FS-kpi-val { font-size: 26px; font-weight: 800; color: #0f172a;
    line-height: 1.1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.FS-kpi-label { font-size: 11px; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

/* ── Hero kart (tutar) — altın gradient vurgu ─────────────────── */
.FS-kpi-hero { border-color: transparent;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-left: 4px solid #f59e0b; }
.FS-kpi-hero .FS-kpi-icon { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.FS-kpi-hero .FS-kpi-val { color: #92400e; }

/* ── Dark mode ───────────────────────────────────────────────── */
body.fos-dark .FS-kpi-card { background: var(--fos-dark-card); border-color: #334155; }
body.fos-dark .FS-kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.3); }
body.fos-dark .FS-kpi-icon { background: linear-gradient(135deg, #1e293b, #334155); color: #94a3b8; }
body.fos-dark .FS-kpi-val { color: #f1f5f9; }
body.fos-dark .FS-kpi-label { color: #64748b; }
body.fos-dark .FS-kpi-hero { background: linear-gradient(135deg, rgba(120,53,15,.2), rgba(120,53,15,.1)); border-left-color: #f59e0b; }
body.fos-dark .FS-kpi-hero .FS-kpi-icon { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
body.fos-dark .FS-kpi-hero .FS-kpi-val { color: #fbbf24; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .FS-kpi-bar { flex-direction: column; gap: 10px; }
    .FS-kpi-card { padding: 14px 16px; }
    .FS-kpi-val { font-size: 22px; }
    .FS-kpi-icon { width: 36px; height: 36px; font-size: 16px; }
}

/* ================================================================
   FS-GECE — Accordion Gece Detay (Satıra Tıkla → Geceler Açılsın)
   Smooth slide, turuncu accent, blur-save
   ================================================================ */

/* ── Excel-Style Gece Hücreleri (tarih kolonları) ────────────── */
/* Her kolon = 1 gece, hücre = oda tipi inputu (SNG, DBL vb.) */
.FS-inh-gece-td { padding: 2px !important; text-align: center; }

/* Boş gece (oda o gecede yok) — pasif çapraz çizgi efekti */
.FS-inh-gece-bos {
    background: repeating-linear-gradient(
        -45deg, transparent, transparent 3px, rgba(148, 163, 184, .08) 3px, rgba(148, 163, 184, .08) 4px
    ) !important;
}

/* Gece tip input — kompakt, uppercase, ortala */
.FS-inh-gece-inp {
    width: 100%; min-width: 48px; max-width: 58px;
    text-align: center; text-transform: uppercase;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    padding: 3px 2px; border: 1px solid #e2e8f0;
    border-radius: 4px; background: #fff;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.FS-inh-gece-inp:focus {
    border-color: #f97316; outline: none;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .15);
}
/* Dolu hücre — hafif yeşil zemin (veri girilmiş — JS class toggle) */
.FS-inh-gece-dolu {
    background: #f0fdf4; border-color: #bbf7d0;
}

/* Fuar günü kolon başlığı — gold accent */
.FS-inh-fuar-gun {
    background: linear-gradient(135deg, rgba(249, 115, 22, .08), rgba(251, 191, 36, .08)) !important;
    color: #92400e; font-weight: 700;
}

/* ── Dark mode ───────────────────────────────────────────────── */
body.fos-dark .FS-inh-gece-bos {
    background: repeating-linear-gradient(
        -45deg, transparent, transparent 3px, rgba(148, 163, 184, .04) 3px, rgba(148, 163, 184, .04) 4px
    ) !important;
}
body.fos-dark .FS-inh-gece-inp {
    background: var(--fos-dark-card); color: #f8fafc;
    border-color: #334155;
}
body.fos-dark .FS-inh-gece-inp:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .2);
}
body.fos-dark .FS-inh-gece-dolu {
    background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .2);
}
body.fos-dark .FS-inh-fuar-gun {
    background: rgba(249, 115, 22, .12) !important;
    color: #fbbf24;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .FS-inh-gece-inp { min-width: 40px; max-width: 48px; font-size: 10px; }
}

/* ================================================================
   FS-PVT — Inhouse Pivot Tablo (Tip × Tarih Premium Matrisi)
   Excel mutabakat formatı: sayılar + tutarlar + fuar vurgusu
   ================================================================ */

/* ── Tablo genel ────────────────────────────────────────────── */
.FS-inh-pivot { font-size: 12px; border-collapse: collapse; width: 100%; }
.FS-inh-pivot th,
.FS-inh-pivot td { text-align: center; padding: 6px 10px; white-space: nowrap; border: 1px solid #e2e8f0; }

/* ── Sticky sol kolon ────────────────────────────────────────── */
.FS-pvt-sticky { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left !important;
    font-weight: 700; min-width: 80px; border-right: 2px solid #cbd5e1 !important; }

/* ── Thead başlıkları ────────────────────────────────────────── */
.FS-pvt-th { font-size: 11px; font-weight: 600; color: #475569; background: #f8fafc; padding: 8px 10px; }

/* ── Tip adı hücresi ─────────────────────────────────────────── */
.FS-pvt-tip { font-size: 12px; font-weight: 700; color: #1e293b; letter-spacing: .5px; }

/* ── Hücreler ────────────────────────────────────────────────── */
.FS-pvt-cell { font-variant-numeric: tabular-nums; min-width: 44px; }
.FS-pvt-dolu { font-weight: 700; color: #0f172a; }
.FS-pvt-sifir { color: #cbd5e1; }

/* ── Fuar günleri — sarı vurgu (Excel'deki gibi) ─────────────── */
.FS-pvt-fuar { background: rgba(250, 204, 21, .15) !important; }
th.FS-pvt-fuar { background: rgba(250, 204, 21, .25) !important; color: #92400e; font-weight: 700; }

/* ── TOPLAM / FİYAT / GENEL TOPLAM kolonları ─────────────────── */
.FS-pvt-toplam { font-weight: 700 !important; background: #f1f5f9; border-left: 2px solid #cbd5e1 !important; }
.FS-pvt-genel { color: #15803d; font-weight: 700; }

/* ── Otel standart fiyat ikonu (sözleşmede yok uyarısı) ──────── */
.FS-pvt-otel-ikon { color: #d97706; font-size: 11px; margin-left: 3px; cursor: help; vertical-align: middle; }
body.fos-dark .FS-pvt-otel-ikon { color: #fbbf24; }

/* ── TOPLAM satırı (sayı + tutar) ─────────────────────────────── */
.FS-pvt-toplam-row { background: #f8fafc; }
.FS-pvt-toplam-row td { font-weight: 700 !important; border-top: 2px solid #94a3b8 !important; }

/* ── Sayı satırları ──────────────────────────────────────────── */
.FS-pvt-sayi-row:hover { background: rgba(249, 115, 22, .04); }

/* ── Bölüm ayracı (sayılar ↔ tutarlar) ──────────────────────── */
.FS-pvt-sep-row td { height: 4px; padding: 0; border: none;
    background: linear-gradient(90deg, #f97316 0%, #fbbf24 50%, #f97316 100%); }

/* ── Tutar satırları ─────────────────────────────────────────── */
.FS-pvt-tutar-row { background: #fffbeb; }
.FS-pvt-tutar-cell { font-size: 11px; color: #78716c; }
.FS-pvt-tutar-row:hover { background: #fef3c7; }

/* ── Tutar toplam satırı ─────────────────────────────────────── */
.FS-pvt-tutar-toplam td { border-top: 2px solid #d97706 !important; background: #fef3c7; }
.FS-pvt-tutar-toplam .FS-pvt-tutar-cell { font-weight: 700; color: #92400e; font-size: 12px; }

/* ── Dark mode ───────────────────────────────────────────────── */
body.fos-dark .FS-inh-pivot th,
body.fos-dark .FS-inh-pivot td { border-color: #334155; }
body.fos-dark .FS-pvt-sticky { background: var(--fos-dark-card); border-right-color: #475569 !important; }
body.fos-dark .FS-pvt-th { background: #1e293b; color: #94a3b8; }
body.fos-dark .FS-pvt-tip { color: #e2e8f0; }
body.fos-dark .FS-pvt-dolu { color: #f1f5f9; }
body.fos-dark .FS-pvt-sifir { color: #475569; }
body.fos-dark .FS-pvt-fuar { background: rgba(250, 204, 21, .08) !important; }
body.fos-dark th.FS-pvt-fuar { background: rgba(250, 204, 21, .12) !important; color: #fbbf24; }
body.fos-dark .FS-pvt-toplam { background: #1e293b; border-left-color: #475569 !important; }
body.fos-dark .FS-pvt-genel { color: #4ade80; }
body.fos-dark .FS-pvt-toplam-row { background: #1e293b; }
body.fos-dark .FS-pvt-toplam-row td { border-top-color: #64748b !important; }
body.fos-dark .FS-pvt-sep-row td { background: linear-gradient(90deg, #f97316 0%, #fbbf24 50%, #f97316 100%); }
body.fos-dark .FS-pvt-tutar-row { background: rgba(120, 53, 15, .15); }
body.fos-dark .FS-pvt-tutar-cell { color: #d6d3d1; }
body.fos-dark .FS-pvt-tutar-row:hover { background: rgba(120, 53, 15, .25); }
body.fos-dark .FS-pvt-tutar-toplam td { border-top-color: #d97706 !important; background: rgba(120, 53, 15, .2); }
body.fos-dark .FS-pvt-tutar-toplam .FS-pvt-tutar-cell { color: #fbbf24; }
body.fos-dark .FS-pvt-sayi-row:hover { background: rgba(249, 115, 22, .06); }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .FS-inh-pivot th,
    .FS-inh-pivot td { padding: 4px 6px; font-size: 11px; }
    .FS-pvt-cell { min-width: 32px; }
    .FS-pvt-tutar-cell { font-size: 10px; }
    .FS-pvt-sticky { min-width: 60px; }
}

/* ════════════════════════════════════════════════════════════════
   FS-MUT — INHOUSE MUTABAKAT (Org vs Sistem karsilastirma)
   Vitrin ekrani #2 — patron icin premium gorunum.
   ════════════════════════════════════════════════════════════════ */

/* ── KPI KARTLARI ──────────────────────────────────────────── */
.FS-mut-kpi-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}
.FS-mut-kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: transform .15s, box-shadow .15s;
}
.FS-mut-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.FS-mut-kpi-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.FS-mut-kpi-blue  .FS-mut-kpi-icon { background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #fff; }
.FS-mut-kpi-orange .FS-mut-kpi-icon { background: linear-gradient(135deg, #f97316, #fbbf24); color: #fff; }
.FS-mut-kpi-red   .FS-mut-kpi-icon { background: linear-gradient(135deg, #ef4444, #f87171); color: #fff; }
.FS-mut-kpi-green .FS-mut-kpi-icon { background: linear-gradient(135deg, #22c55e, #4ade80); color: #fff; }

.FS-mut-kpi-val {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: #1e293b;
}
.FS-mut-kpi-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #94a3b8;
    margin-top: 2px;
}
.FS-mut-kpi-val.FS-mut-ok   { color: #16a34a; }
.FS-mut-kpi-val.FS-mut-warn { color: #dc2626; }

/* ── MUTABAKAT TABLO ───────────────────────────────────────── */
.FS-mut-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'DM Sans', sans-serif;
    table-layout: fixed; /* Kolon genisliklerini sabitler — 3 tablo hizali olur */
}
.FS-mut-tbl thead { position: sticky; top: 0; z-index: 2; }
.FS-mut-tbl th {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: center;
    white-space: nowrap;
    background: #f1f5f9;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
}
.FS-mut-sticky {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #f1f5f9;
    text-align: left !important;
    min-width: 80px;
    border-right: 2px solid #e2e8f0;
}
.FS-mut-th { min-width: 50px; }
.FS-mut-fuar { background: rgba(249,115,22,.06) !important; }
.FS-mut-toplam-th { background: #e2e8f0 !important; font-weight: 800; min-width: 90px; }

/* Hucre */
.FS-mut-cell {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}
.FS-mut-dolu { font-weight: 700; color: #1e293b; }
.FS-mut-sifir { color: #cbd5e1; }
.FS-mut-tip {
    font-weight: 700;
    color: #1e293b;
    background: #fff !important;
    border-right: 2px solid #e2e8f0;
}
.FS-mut-toplam-td { background: #f8fafc; font-weight: 700; }
.FS-mut-genel { background: #fefce8 !important; color: #92400e; font-weight: 800; }

/* Toplam satiri */
.FS-mut-toplam-row { background: #f1f5f9; }
.FS-mut-toplam-row td { border-top: 2px solid #e2e8f0; font-weight: 800; }
.FS-mut-toplam-lbl {
    background: #f1f5f9 !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .5px;
}
.FS-mut-toplam-val { font-weight: 800; font-size: 13px; }

/* Fark renkleri — TERS MANTIK: pozitif fark = sistem > org = bizim icin KOTU (kirmizi), negatif = IYI (yesil) */
.FS-mut-fark-pos { color: #dc2626 !important; font-weight: 700; background: rgba(239,68,68,.06) !important; }
.FS-mut-fark-neg { color: #16a34a !important; font-weight: 700; background: rgba(34,197,94,.06) !important; }
.FS-mut-fark-ok  { color: #22c55e !important; font-weight: 600; }

/* Org inline input */
.FS-mut-inp {
    width: 52px;
    padding: 3px 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #fff;
    color: #1e293b;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.FS-mut-inp:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 2px rgba(249,115,22,.15);
}
.FS-mut-inp::-webkit-inner-spin-button,
.FS-mut-inp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.FS-mut-inp[type=number] { -moz-appearance: textfield; }

/* Kaydetme flash */
.FS-mut-saved { border-color: #22c55e !important; box-shadow: 0 0 0 2px rgba(34,197,94,.2) !important; }
.FS-mut-error { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,.2) !important; }

/* Sira no kolonu — tum tablolarda ayni genislik (hizalama) */
.FS-mut-sira-col { width: 44px; min-width: 44px; max-width: 44px; }

/* Finansal toplam satiri — vitrin show */
.FS-mut-finans-row { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fff7ed 100%); }
.FS-mut-finans-row td {
    border-top: 2px solid rgba(249,115,22,.3);
    font-weight: 700;
    font-size: 11px;
    color: #92400e;
    padding-top: 8px;
    padding-bottom: 8px;
}
.FS-mut-finans-row .FS-mut-genel {
    background: linear-gradient(135deg, #fef3c7, #fed7aa) !important;
    color: #9a3412 !important;
    font-size: 12px;
    font-weight: 900;
    text-shadow: 0 0 20px rgba(249,115,22,.15);
}
.FS-mut-finans-lbl {
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #b45309;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
}

/* Zengin detay paneli — hover'da finansal breakdown */
.FS-mut-detail-panel {
    position: absolute;
    z-index: 9999;
    width: 320px;
    max-width: 95vw;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #F97316;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    overflow: hidden;
    pointer-events: auto;
    animation: FS-dtp-in .15s ease-out;
}
@keyframes FS-dtp-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Header */
.FS-dtp-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 8px 12px;
    font-size: 11px;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}
.FS-dtp-header i { color: #F97316; margin-right: 2px; }
.FS-dtp-header b { color: #1e293b; }

/* Mini tablo */
.FS-dtp-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    table-layout: auto;
}
.FS-dtp-tbl thead th {
    background: #f8fafc;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #94a3b8;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}
.FS-dtp-tbl tbody td {
    padding: 4px 8px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.FS-dtp-tbl tbody td:first-child { font-weight: 600; }
.FS-dtp-val { font-weight: 700 !important; color: #1e293b !important; text-align: right !important; }
.FS-dtp-row-s td { background: rgba(59,130,246,.04); }
.FS-dtp-row-o td { background: rgba(249,115,22,.04); }

/* Hesaplama gösterimi: 8 gece × €200 = €1.600 */
.FS-dtp-calc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.FS-dtp-x { color: #94a3b8; font-size: 14px; }
.FS-dtp-eq { color: #F97316; font-size: 16px; font-weight: 900; }
.FS-dtp-result { color: #1e293b; font-size: 14px; font-weight: 900; }

/* Versus bar: €6,720 vs €7,900 */
.FS-dtp-versus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.FS-dtp-vs {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    background: #e2e8f0;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Fiyat gösterimi */
.FS-dtp-price {
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
    text-align: center;
}

/* Toplam bar */
.FS-dtp-total {
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 900;
    color: #1e293b;
    text-align: center;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-top: 2px solid rgba(249,115,22,.2);
}

/* TL eşdeğer bar */
.FS-dtp-tl {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 800;
    color: #b45309;
    text-align: center;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.FS-dtp-kur {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    background: rgba(0,0,0,.04);
    padding: 1px 6px;
    border-radius: 3px;
}

/* Fark renkleri */
.FS-dtp-pos { color: #16a34a !important; }
.FS-dtp-neg { color: #dc2626 !important; }
.FS-dtp-ok  { color: #22c55e !important; }

/* ── DARK MODE ─────────────────────────────────────────────── */
body.fos-dark .FS-mut-kpi-card {
    background: var(--fos-dark-card, #1e293b);
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
body.fos-dark .FS-mut-kpi-val { color: #f1f5f9; }
body.fos-dark .FS-mut-kpi-lbl { color: #64748b; }

body.fos-dark .FS-mut-tbl th {
    background: var(--fos-dark-card, #1e293b);
    color: #94a3b8;
    border-bottom-color: #334155;
}
body.fos-dark .FS-mut-sticky {
    background: var(--fos-dark-card, #1e293b) !important;
    border-right-color: #334155;
}
body.fos-dark .FS-mut-cell { border-bottom-color: #1e293b; }
body.fos-dark .FS-mut-dolu { color: #f1f5f9; }
body.fos-dark .FS-mut-sifir { color: #475569; }
body.fos-dark .FS-mut-tip {
    color: #f1f5f9;
    background: var(--fos-dark-base, #0f172a) !important;
    border-right-color: #334155;
}
body.fos-dark .FS-mut-toplam-td { background: rgba(255,255,255,.03); }
body.fos-dark .FS-mut-genel { background: rgba(254,252,232,.06) !important; color: #fbbf24; }
body.fos-dark .FS-mut-toplam-row { background: var(--fos-dark-card, #1e293b); }
body.fos-dark .FS-mut-toplam-row td { border-top-color: #334155; }
body.fos-dark .FS-mut-toplam-lbl { background: var(--fos-dark-card, #1e293b) !important; }
body.fos-dark .FS-mut-toplam-th { background: #334155 !important; }
body.fos-dark .FS-mut-fuar { background: rgba(249,115,22,.1) !important; }

body.fos-dark .FS-mut-fark-pos { background: rgba(239,68,68,.1) !important; }
body.fos-dark .FS-mut-fark-neg { background: rgba(34,197,94,.1) !important; }
body.fos-dark .FS-mut-finans-row { background: linear-gradient(135deg, rgba(254,252,232,.06) 0%, rgba(251,191,36,.1) 100%); }
body.fos-dark .FS-mut-finans-row td { border-top-color: rgba(251,191,36,.25); color: #fbbf24; }
body.fos-dark .FS-mut-finans-row .FS-mut-genel { background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(249,115,22,.15)) !important; color: #fbbf24 !important; }
body.fos-dark .FS-mut-finans-lbl { color: #fbbf24; background: linear-gradient(135deg, rgba(254,252,232,.06) 0%, rgba(251,191,36,.1) 100%) !important; }
body.fos-dark .FS-mut-detail-panel {
    background: #1e293b;
    border-color: #334155;
    border-left-color: #F97316;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
body.fos-dark .FS-dtp-header { background: linear-gradient(135deg, #0f172a, #1e293b); border-bottom-color: #334155; color: #94a3b8; }
body.fos-dark .FS-dtp-header b { color: #f1f5f9; }
body.fos-dark .FS-dtp-tbl thead th { background: #0f172a; color: #64748b; border-bottom-color: #334155; }
body.fos-dark .FS-dtp-tbl tbody td { border-bottom-color: #1e293b; color: #cbd5e1; }
body.fos-dark .FS-dtp-val { color: #f1f5f9 !important; }
body.fos-dark .FS-dtp-row-s td { background: rgba(59,130,246,.08); }
body.fos-dark .FS-dtp-row-o td { background: rgba(249,115,22,.08); }
body.fos-dark .FS-dtp-calc { background: #0f172a; border-top-color: #334155; color: #f1f5f9; }
body.fos-dark .FS-dtp-result { color: #f1f5f9; }
body.fos-dark .FS-dtp-versus { background: #0f172a; border-top-color: #334155; color: #cbd5e1; }
body.fos-dark .FS-dtp-vs { background: #334155; color: #64748b; }
body.fos-dark .FS-dtp-price { color: #f1f5f9; }
body.fos-dark .FS-dtp-total { background: linear-gradient(135deg, rgba(254,252,232,.06), rgba(251,191,36,.1)); border-top-color: rgba(251,191,36,.2); color: #fbbf24; }
body.fos-dark .FS-dtp-tl { background: linear-gradient(135deg, rgba(180,83,9,.1), rgba(249,115,22,.08)); color: #fbbf24; }
body.fos-dark .FS-dtp-kur { background: rgba(255,255,255,.06); color: #64748b; }

body.fos-dark .FS-mut-inp {
    background: var(--fos-dark-base, #0f172a);
    border-color: #334155;
    color: #f1f5f9;
}
body.fos-dark .FS-mut-inp:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 2px rgba(249,115,22,.2);
}

/* ── COMPACT KART (Tum Oteller modu) ──────────────────────── */
.FS-mut-compact-card { margin-top: 16px; }
.FS-mut-compact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
/* Dark mode compact */
body.fos-dark .FS-mut-compact-header { border-bottom-color: #334155; }

/* ── MUTABAKAT HERO — Mali Ozet Paneli ─────────────────────── */
.FS-mut-hero {
    margin-top: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-left: 3px solid #f97316;
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.FS-mut-hero-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #64748b;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.FS-mut-hero-title i { color: #f97316; font-size: 14px; }
.FS-mut-hero-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: center;
}
.FS-mut-hero-col { text-align: center; padding: 8px 16px; }
.FS-mut-hero-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #94a3b8;
    margin-bottom: 4px;
}
.FS-mut-hero-val {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}
.FS-mut-hero-sub {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
}
.FS-mut-hero-sep {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, #cbd5e1, transparent);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.FS-mut-hero-sep i {
    position: absolute;
    background: #f1f5f9;
    padding: 2px 0;
    color: #94a3b8;
    font-size: 12px;
}
.FS-mut-hero-result .FS-mut-hero-val {
    padding: 6px 16px;
    border-radius: 8px;
    display: inline-block;
}
.FS-mut-hero-result .FS-mut-hero-val.FS-mut-hero-good {
    color: #16a34a;
    background: rgba(34,197,94,.08);
}
.FS-mut-hero-result .FS-mut-hero-val.FS-mut-hero-bad {
    color: #dc2626;
    background: rgba(239,68,68,.08);
}
.FS-mut-hero-result .FS-mut-hero-val.FS-mut-hero-ok {
    color: #22c55e;
    background: rgba(34,197,94,.06);
}
.FS-mut-hero-result .FS-mut-hero-sub.FS-mut-hero-good { color: #16a34a; }
.FS-mut-hero-result .FS-mut-hero-sub.FS-mut-hero-bad  { color: #dc2626; }
.FS-mut-hero-result .FS-mut-hero-sub.FS-mut-hero-ok   { color: #22c55e; }

/* Compact kart — gelistirilmis header badge'leri */
.FS-mut-hotel-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.FS-mut-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.FS-mut-badge-pill i { font-size: 10px; }
.FS-mut-badge-pill.FS-mut-bp-green { background: rgba(34,197,94,.1); color: #16a34a; }
.FS-mut-badge-pill.FS-mut-bp-red   { background: rgba(239,68,68,.1); color: #dc2626; }
.FS-mut-badge-pill.FS-mut-bp-ok    { background: rgba(34,197,94,.08); color: #22c55e; }
.FS-mut-badge-pill.FS-mut-bp-orange { background: rgba(249,115,22,.1); color: #ea580c; }
.FS-mut-badge-pill.FS-mut-bp-blue  { background: rgba(59,130,246,.1); color: #2563eb; }

/* Esleme mini progress bar */
.FS-mut-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(0,0,0,.03);
    font-size: 11px;
    font-weight: 700;
}
.FS-mut-progress-bar {
    width: 48px;
    height: 5px;
    border-radius: 3px;
    background: #e2e8f0;
    overflow: hidden;
}
.FS-mut-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .3s;
}
.FS-mut-progress-fill.FS-mut-pf-ok  { background: linear-gradient(90deg, #22c55e, #4ade80); }
.FS-mut-progress-fill.FS-mut-pf-mid { background: linear-gradient(90deg, #f97316, #fbbf24); }
.FS-mut-progress-fill.FS-mut-pf-low { background: linear-gradient(90deg, #ef4444, #f87171); }
body.fos-dark .FS-mut-progress { background: rgba(255,255,255,.06); }
body.fos-dark .FS-mut-progress-bar { background: #334155; }

/* Compact kart — tutar ozet satiri */
.FS-mut-tutar-bar {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(249,115,22,.04), rgba(251,191,36,.02));
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px;
    font-size: 12px;
}
.FS-mut-tutar-item { display: flex; align-items: center; gap: 4px; }
.FS-mut-tutar-lbl { color: #64748b; font-weight: 600; }
.FS-mut-tutar-val { font-weight: 800; color: #1e293b; }
.FS-mut-tutar-sep { width: 1px; height: 16px; background: #cbd5e1; }

/* Genel toplam bar — tum oteller alt ozet */
.FS-mut-grand-bar {
    margin-top: 16px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 10px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.FS-mut-grand-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 2px;
}
.FS-mut-grand-title i { color: #f97316; }
.FS-mut-grand-items { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.FS-mut-grand-item { text-align: center; }
.FS-mut-grand-item-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #64748b; }
.FS-mut-grand-item-val { font-size: 18px; font-weight: 800; color: #f1f5f9; }
.FS-mut-grand-item-val.FS-mut-gv-good { color: #4ade80; }
.FS-mut-grand-item-val.FS-mut-gv-bad  { color: #f87171; }
.FS-mut-grand-item-val.FS-mut-gv-ok   { color: #22c55e; }
.FS-mut-grand-sep { width: 1px; height: 32px; background: rgba(255,255,255,.1); }

/* ── DARK MODE — Hero + Badges ─────────────────────────────── */
body.fos-dark .FS-mut-hero {
    background: linear-gradient(135deg, var(--fos-dark-card, #1e293b) 0%, var(--fos-dark-base, #0f172a) 100%);
    border-color: rgba(255,255,255,.06);
}
body.fos-dark .FS-mut-hero-title { color: #64748b; }
body.fos-dark .FS-mut-hero-lbl { color: #64748b; }
body.fos-dark .FS-mut-hero-val { color: #f1f5f9; }
body.fos-dark .FS-mut-hero-sub { color: #94a3b8; }
body.fos-dark .FS-mut-hero-sep i { background: var(--fos-dark-card, #1e293b); }
body.fos-dark .FS-mut-hero-sep { background: linear-gradient(to bottom, transparent, #334155, transparent); }
body.fos-dark .FS-mut-tutar-bar {
    background: linear-gradient(135deg, rgba(249,115,22,.06), rgba(251,191,36,.03));
    border-top-color: #334155;
}
body.fos-dark .FS-mut-tutar-lbl { color: #64748b; }
body.fos-dark .FS-mut-tutar-val { color: #f1f5f9; }
body.fos-dark .FS-mut-tutar-sep { background: #334155; }

/* ── MOBILE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .FS-mut-kpi-wrap { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .FS-mut-kpi-card { padding: 12px 14px; gap: 10px; }
    .FS-mut-kpi-icon { width: 38px; height: 38px; font-size: 18px; }
    .FS-mut-kpi-val { font-size: 20px; }
    .FS-mut-tbl th,
    .FS-mut-tbl td { padding: 4px 6px; font-size: 11px; }
    .FS-mut-inp { width: 40px; font-size: 11px; }
    .FS-mut-sticky { min-width: 60px; }
    .FS-mut-sira-col { width: 32px; min-width: 32px; max-width: 32px; }
    .FS-mut-finans-row td { font-size: 9px; }
    .FS-mut-detail-panel { width: 280px; font-size: 11px; }
    .FS-dtp-total { font-size: 14px; }
    .FS-dtp-tl { font-size: 12px; }
    .FS-mut-compact-header { flex-direction: column; align-items: flex-start; }
    .FS-mut-hero { padding: 14px 16px; }
    .FS-mut-hero-grid { grid-template-columns: 1fr; gap: 12px; }
    .FS-mut-hero-sep { width: 100%; height: 1px; background: linear-gradient(to right, transparent, #cbd5e1, transparent); }
    .FS-mut-hero-sep i { display: none; }
    .FS-mut-hero-val { font-size: 20px; }
    .FS-mut-grand-bar { flex-direction: column; padding: 14px 16px; }
    .FS-mut-grand-items { gap: 16px; }
    .FS-mut-grand-item-val { font-size: 15px; }
    .FS-mut-hotel-badges { gap: 4px; }
    .FS-mut-badge-pill { font-size: 10px; padding: 2px 8px; }
    .FS-mut-tutar-bar { gap: 10px; padding: 8px 12px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   FS-gun — HIZLI GÜN SEÇİCİ (Inhouse Operasyon)
   Fuar giriş-çıkış arası günler pill buton olarak sıralanır
   ═══════════════════════════════════════════════════════════ */
/* Container — yatay kaydırılabilir pill bar */
.FS-gun-bar {
    display: flex; gap: 4px; overflow-x: auto; padding: 2px 0;
    scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.FS-gun-bar::-webkit-scrollbar { height: 4px; }
.FS-gun-bar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Gün butonu — kompakt pill */
.FS-gun-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 44px; padding: 4px 8px; border: 1px solid var(--fos-border, #d1d5db);
    border-radius: 8px; background: var(--fos-light-surface, #fff);
    cursor: pointer; transition: all .15s; flex-shrink: 0; user-select: none;
}
.FS-gun-btn:hover {
    border-color: #F97316; background: #fff7ed;
    box-shadow: 0 1px 4px rgba(249,115,22,.15);
}
/* Aktif gün — turuncu accent */
.FS-gun-btn.FS-gun-aktif {
    border-color: #F97316; background: linear-gradient(135deg, #F97316, #FBBF24);
    color: #fff; box-shadow: 0 2px 8px rgba(249,115,22,.3);
}
.FS-gun-btn.FS-gun-aktif .FS-gun-sayi { color: #fff; }
.FS-gun-btn.FS-gun-aktif .FS-gun-ad { color: rgba(255,255,255,.85); }

/* Bugün butonu — alt nokta vurgusu ile ayırt edici */
.FS-gun-btn.FS-gun-bugun { border-color: #F97316; border-width: 2px; position: relative; }
.FS-gun-btn.FS-gun-bugun::after {
    content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: #F97316;
}
.FS-gun-btn.FS-gun-bugun.FS-gun-aktif::after { background: #fff; }

/* Gün sayısı — büyük */
.FS-gun-sayi { font-size: 15px; font-weight: 700; line-height: 1.1; color: #1e293b; }
/* Gün adı kısaltma — küçük */
.FS-gun-ad { font-size: 9px; font-weight: 600; text-transform: uppercase; color: #94a3b8; letter-spacing: .5px; }

/* Dark mode */
body.fos-dark .FS-gun-btn {
    background: var(--fos-dark-card, #1e293b); border-color: #334155;
}
body.fos-dark .FS-gun-btn:hover {
    border-color: #F97316; background: rgba(249,115,22,.1);
}
body.fos-dark .FS-gun-btn.FS-gun-aktif {
    background: linear-gradient(135deg, #F97316, #FBBF24); border-color: #F97316;
}
body.fos-dark .FS-gun-sayi { color: #e2e8f0; }
body.fos-dark .FS-gun-ad { color: #64748b; }
body.fos-dark .FS-gun-btn.FS-gun-aktif .FS-gun-sayi { color: #fff; }
body.fos-dark .FS-gun-btn.FS-gun-bugun { border-color: #F97316; }
body.fos-dark .FS-gun-bar::-webkit-scrollbar-thumb { background: #475569; }

/* Mobile */
@media (max-width: 768px) {
    .FS-gun-btn { min-width: 38px; padding: 3px 6px; }
    .FS-gun-sayi { font-size: 13px; }
    .FS-gun-ad { font-size: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   INHOUSE OPERASYON POPUP (FS-iop-*)
   Satırdaki (i) ikonuna tıklanınca açılan zengin detay kartı.
   ═══════════════════════════════════════════════════════════ */

/* ── Cari kolonu — küçük font, max 2 satır ── */
.FS-iop-cari {
    font-size: 12px; line-height: 1.35; color: #475569;
    max-width: 280px; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ── Durum ikonu — badge yerine tek ikon ── */
.FS-iop-durum-ico { font-size: 18px; }

/* ── Detay butonu — satırdaki (i) ikonu ── */
.FS-iop-detay-btn {
    background: none; border: 1px solid transparent; border-radius: 50%;
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: #94a3b8; font-size: 15px; transition: all .15s;
}
.FS-iop-detay-btn:hover { color: #f97316; border-color: #fed7aa; background: #fff7ed; }

/* ── Popup — floating kart ── */
.FS-iop-popup {
    position: absolute; z-index: 1050; width: 420px; max-height: 80vh; overflow-y: auto;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.03);
}
.FS-iop-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
    border-radius: 12px 12px 0 0; position: sticky; top: 0; z-index: 1;
}
.FS-iop-popup-title { font-size: 13px; font-weight: 700; color: #1e293b; }
.FS-iop-popup-title i { color: #f97316; margin-right: 4px; }
.FS-iop-popup-kapat {
    background: none; border: none; font-size: 20px; color: #94a3b8;
    cursor: pointer; padding: 0 4px; line-height: 1;
}
.FS-iop-popup-kapat:hover { color: #ef4444; }
.FS-iop-popup-body { padding: 10px 14px; }

/* ── Bölüm (section) ── */
.FS-iop-sec { border-bottom: 1px solid #f1f5f9; padding-bottom: 8px; margin-bottom: 8px; }
.FS-iop-sec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.FS-iop-sec-baslik {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: #f97316; margin-bottom: 6px;
}
.FS-iop-sec-baslik i { font-size: 11px; }

/* ── Oda bilgi grid ── */
.FS-iop-sec-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px 12px; }
.FS-iop-pair { }
.FS-iop-lbl { font-size: 10px; color: #94a3b8; display: block; }
.FS-iop-val { font-size: 12px; font-weight: 600; color: #1e293b; }

/* ── Firma ── */
.FS-iop-firma-adi { font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 2px; }
.FS-iop-firma-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.FS-iop-firma-meta i { font-size: 10px; color: #94a3b8; margin-right: 2px; }

/* ── Kişiler ── */
.FS-iop-kisi { padding: 4px 0; border-bottom: 1px solid #f8fafc; }
.FS-iop-kisi:last-child { border-bottom: none; }
.FS-iop-kisi strong { font-size: 12px; color: #1e293b; }
.FS-iop-kisi-cikmis { opacity: .5; }
.FS-iop-kisi-cikmis strong { text-decoration: line-through; }
.FS-iop-kisi-bekle { opacity: .65; }
.FS-iop-kisi-detay { font-size: 10px; color: #94a3b8; margin-top: 1px; }
.FS-iop-kisi-detay i { font-size: 9px; margin-right: 1px; }
.FS-iop-kisi-detay span { margin-right: 8px; }
.FS-iop-kisi-tarih { font-size: 10px; color: #64748b; margin-top: 1px; }

/* ── Masraflar ── */
.FS-iop-masraf { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; }
.FS-iop-masraf-tip { font-weight: 600; color: #475569; min-width: 80px; }
.FS-iop-masraf-tutar { margin-left: auto; font-weight: 600; color: #1e293b; white-space: nowrap; }

/* ── Değişim logu ── */
.FS-iop-degisim { font-size: 11px; color: #475569; padding: 2px 0; }
.FS-iop-degisim-tar { font-weight: 600; color: #64748b; }

/* ── DARK MODE ── */
body.fos-dark .FS-iop-cari { color: #94a3b8; }
body.fos-dark .FS-iop-detay-btn { color: #64748b; }
body.fos-dark .FS-iop-detay-btn:hover { color: #f97316; border-color: #78350f; background: rgba(249,115,22,.08); }
body.fos-dark .FS-iop-popup {
    background: #1e293b; border-color: #334155;
    box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
}
body.fos-dark .FS-iop-popup-header { background: linear-gradient(135deg, #1a1a2e 0%, #1e293b 100%); border-bottom-color: #334155; }
body.fos-dark .FS-iop-popup-title { color: #e2e8f0; }
body.fos-dark .FS-iop-popup-kapat { color: #64748b; }
body.fos-dark .FS-iop-popup-kapat:hover { color: #ef4444; }
body.fos-dark .FS-iop-sec { border-bottom-color: #334155; }
body.fos-dark .FS-iop-val { color: #e2e8f0; }
body.fos-dark .FS-iop-firma-adi { color: #e2e8f0; }
body.fos-dark .FS-iop-firma-meta { color: #94a3b8; }
body.fos-dark .FS-iop-kisi strong { color: #e2e8f0; }
body.fos-dark .FS-iop-kisi { border-bottom-color: #1e293b; }
body.fos-dark .FS-iop-masraf-tip { color: #94a3b8; }
body.fos-dark .FS-iop-masraf-tutar { color: #e2e8f0; }
body.fos-dark .FS-iop-degisim { color: #94a3b8; }
body.fos-dark .FS-iop-degisim-tar { color: #cbd5e1; }

/* ── MOBILE ── */
@media (max-width: 768px) {
    .FS-iop-popup {
        position: fixed !important; left: 8px !important; right: 8px !important;
        top: auto !important; bottom: 0 !important; width: auto !important;
        max-height: 70vh; border-radius: 16px 16px 0 0;
    }
    .FS-iop-cari { max-width: 160px; font-size: 11px; }
    .FS-iop-sec-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   FS-SUB-NAV — Alt sayfa navigasyon çubuğu (Ödeme Yönetimi gibi hub sayfalar)
   ═══════════════════════════════════════════════════════════════ */
/* Light */
.FS-sub-nav {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 8px 12px; margin-bottom: 16px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 10px; border-left: 3px solid #F97316;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.FS-sub-nav-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 7px;
    font-size: 13px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    color: #475569; background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all .15s ease;
}
.FS-sub-nav-item:hover {
    color: #1e293b; background: #f1f5f9;
    border-color: #cbd5e1;
}
.FS-sub-nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, #F97316, #f59e0b);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(249,115,22,.25);
}
.FS-sub-nav-item i { font-size: 14px; }
.FS-sub-nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 5px;
    font-size: 10px; font-weight: 700; border-radius: 9px;
    background: rgba(0,0,0,.08); color: #64748b;
}
.FS-sub-nav-item.active .FS-sub-nav-badge {
    background: rgba(255,255,255,.25); color: #fff;
}
/* Dark */
body.fos-dark .FS-sub-nav {
    background: var(--fos-dark-card); border-color: var(--fos-dark-border);
    border-left-color: #F97316;
}
body.fos-dark .FS-sub-nav-item {
    color: #cbd5e1; background: var(--fos-dark-base);
    border-color: var(--fos-dark-border);
}
body.fos-dark .FS-sub-nav-item:hover {
    color: #f1f5f9; background: #334155;
    border-color: #475569;
}
body.fos-dark .FS-sub-nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, #F97316, #f59e0b);
    border-color: transparent;
}
body.fos-dark .FS-sub-nav-badge {
    background: rgba(255,255,255,.08); color: #94a3b8;
}
/* Mobile */
@media (max-width: 768px) {
    .FS-sub-nav { padding: 6px 8px; gap: 4px; }
    .FS-sub-nav-item { padding: 6px 10px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   FS-STAT — Premium istatistik kartları
   İkon kutulu, renkli, sayı + etiket yapısı.
   Kullanım: Transfer, Dış Katılım, dashboard özet kartları.
   ═══════════════════════════════════════════════════════════ */

/* Kart — frosted glass, hafif gölge */
.FS-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    height: 100%;
    transition: box-shadow .2s, transform .2s;
}
.FS-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.07);
    transform: translateY(-1px);
}

/* İkon kutusu — yuvarlak köşeli kare, pastel arkaplan */
.FS-stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
/* İkon renk varyantları */
.FS-si-orange { background: #FFF7ED; color: #F97316; }
.FS-si-blue   { background: #EFF6FF; color: #3B82F6; }
.FS-si-green  { background: #F0FDF4; color: #22C55E; }
.FS-si-red    { background: #FEF2F2; color: #EF4444; }
.FS-si-purple { background: #FAF5FF; color: #A855F7; }
.FS-si-teal   { background: #F0FDFA; color: #14B8A6; }

/* Değer — büyük kalın rakam */
.FS-stat-val {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #1E293B;
}
/* Değer renk varyantları */
.FS-stat-val.FS-sv-orange { color: #F97316; }
.FS-stat-val.FS-sv-blue   { color: #3B82F6; }
.FS-stat-val.FS-sv-green  { color: #22C55E; }
.FS-stat-val.FS-sv-red    { color: #EF4444; }

/* Etiket — küçük uppercase */
.FS-stat-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94A3B8;
    margin-top: 2px;
}

/* Alt bilgi — ek açıklama, ikinci satır */
.FS-stat-sub {
    font-size: 12px;
    color: #94A3B8;
    margin-top: 2px;
}

/* Çoklu tutar gösterimi — döviz bazlı satırlar */
.FS-stat-multi {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: #1E293B;
}

/* ── Dark mode ── */
body.fos-dark .FS-stat-card {
    background: var(--fos-dark-card, #1E293B);
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
body.fos-dark .FS-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
body.fos-dark .FS-stat-val { color: #F1F5F9; }
body.fos-dark .FS-stat-lbl { color: #64748B; }
body.fos-dark .FS-stat-sub { color: #64748B; }
body.fos-dark .FS-stat-multi { color: #F1F5F9; }
/* Dark ikon kutuları — daha koyu pastel */
body.fos-dark .FS-si-orange { background: rgba(249,115,22,.12); color: #FB923C; }
body.fos-dark .FS-si-blue   { background: rgba(59,130,246,.12); color: #60A5FA; }
body.fos-dark .FS-si-green  { background: rgba(34,197,94,.12);  color: #4ADE80; }
body.fos-dark .FS-si-red    { background: rgba(239,68,68,.12);  color: #F87171; }
body.fos-dark .FS-si-purple { background: rgba(168,85,247,.12); color: #C084FC; }
body.fos-dark .FS-si-teal   { background: rgba(20,184,166,.12); color: #2DD4BF; }

/* ── FS-stat-finance — Döviz kırılımlı finansal özet kartı ── */
.FS-stat-finance { align-items: flex-start; }
.FS-stat-finance-body { display: flex; gap: 16px; align-items: center; flex: 1; min-width: 0; }
.FS-fin-rows { display: flex; flex-direction: column; gap: 4px; }
.FS-fin-row { display: flex; align-items: center; gap: 8px; }
.FS-fin-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.FS-fin-eur { background: linear-gradient(135deg, #dbeafe, #eff6ff); color: #1d4ed8; }
.FS-fin-usd { background: linear-gradient(135deg, #dcfce7, #f0fdf4); color: #15803d; }
.FS-fin-gbp { background: linear-gradient(135deg, #fce7f3, #fdf2f8); color: #be185d; }
.FS-fin-try { background: linear-gradient(135deg, #fef3c7, #fffbeb); color: #b45309; }
.FS-fin-val { font-size: 15px; font-weight: 700; color: #1e293b; }
.FS-fin-tl { border-left: 2px solid #e2e8f0; padding-left: 16px; text-align: right; }
.FS-fin-tl-val { font-size: 22px; font-weight: 800; color: #1d4ed8; letter-spacing: -0.5px; }
.FS-fin-tl-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-top: 2px; }
.FS-fin-kur { font-size: 11px; font-weight: 500; color: #64748b; margin-top: 2px; }

/* ── Dark — FS-stat-finance ── */
body.fos-dark .FS-fin-val { color: #e2e8f0; }
body.fos-dark .FS-fin-eur { background: rgba(29,78,216,0.15); color: #93bbfd; }
body.fos-dark .FS-fin-usd { background: rgba(21,128,61,0.15); color: #86efac; }
body.fos-dark .FS-fin-gbp { background: rgba(190,24,93,0.15); color: #f9a8d4; }
body.fos-dark .FS-fin-try { background: rgba(180,83,9,0.15); color: #fcd34d; }
body.fos-dark .FS-fin-tl { border-left-color: #334155; }
body.fos-dark .FS-fin-tl-val { color: #60a5fa; }
body.fos-dark .FS-fin-tl-lbl { color: #64748b; }
body.fos-dark .FS-fin-kur { color: #94a3b8; }

/* ── Mobile ── */
@media (max-width: 768px) {
    .FS-stat-card { padding: 14px 14px; gap: 10px; }
    .FS-stat-icon { width: 40px; height: 40px; min-width: 40px; font-size: 18px; border-radius: 10px; }
    .FS-stat-val  { font-size: 20px; }
    .FS-stat-multi { font-size: 13px; }
    .FS-stat-finance-body { flex-direction: column; gap: 10px; align-items: flex-start; }
    .FS-fin-tl { border-left: none; border-top: 1px solid #e2e8f0; padding-left: 0; padding-top: 8px; text-align: left; width: 100%; }
    body.fos-dark .FS-fin-tl { border-top-color: #334155; }
    .FS-fin-tl-val { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   ÖDEME KALEMLERİ PREMIUM — FS-odk-*
   Patron-level özet ekranı: özet kartlar + kur bar + gelişmiş tablo
   KURAL 14: dark mode + mobile zorunlu
   ═══════════════════════════════════════════════════════════ */

/* ── Özet Kartlar — compact horizontal 3'lü grid ── */
.FS-odk-ozet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.FS-odk-kart {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: box-shadow 0.15s ease;
}
.FS-odk-kart:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
/* Sol kenar accent gradient — her kart farklı renk */
.FS-odk-kart::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 8px 0 0 8px;
}
.FS-odk-kart-borc::before   { background: linear-gradient(180deg, #F97316, #FBBF24); }
.FS-odk-kart-alacak::before { background: linear-gradient(180deg, #059669, #34d399); }
.FS-odk-kart-kalan::before  { background: linear-gradient(180deg, #dc2626, #f87171); }
.FS-odk-kart-kalan.pozitif::before { background: linear-gradient(180deg, #dc2626, #f87171); }
.FS-odk-kart-kalan.negatif::before { background: linear-gradient(180deg, #059669, #34d399); }
/* İkon dairesi — compact */
.FS-odk-ikon {
    width: 34px; height: 34px; min-width: 34px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.FS-odk-kart-borc .FS-odk-ikon   { background: rgba(249,115,22,0.1); color: #F97316; }
.FS-odk-kart-alacak .FS-odk-ikon { background: rgba(5,150,105,0.1);  color: #059669; }
.FS-odk-kart-kalan .FS-odk-ikon  { background: rgba(220,38,38,0.1);  color: #dc2626; }
.FS-odk-kart-kalan.negatif .FS-odk-ikon { background: rgba(5,150,105,0.1); color: #059669; }
/* İçerik wrapper — etiket + değer dikey */
.FS-odk-icerik { flex: 1; min-width: 0; }
/* Etiket */
.FS-odk-etiket {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin-bottom: 2px;
}
/* Ana değer — compact */
.FS-odk-deger {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.3px;
}
.FS-odk-kart-borc .FS-odk-deger   { color: #ea580c; }
.FS-odk-kart-alacak .FS-odk-deger { color: #059669; }
.FS-odk-kart-kalan .FS-odk-deger  { color: #dc2626; }
.FS-odk-kart-kalan.negatif .FS-odk-deger { color: #059669; }
/* Döviz simgesi ₺ */
.FS-odk-simge {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 2px;
}

/* ── Kur Bilgi Çubuğu — compact ── */
.FS-odk-kur {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
    border: 1px solid #fed7aa;
    border-left: 3px solid #F97316;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #92400e;
}
.FS-odk-kur i { font-size: 14px; color: #F97316; }
.FS-odk-kur strong { font-weight: 700; color: #c2410c; }

/* ── Tablo döviz chip'leri ── */
.FS-odk-dvz {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
    margin-bottom: 2px;
    white-space: nowrap;
}
.FS-odk-dvz-sym {
    font-weight: 700;
    min-width: 10px;
}
/* TL toplam — vurgulu */
.FS-odk-tl {
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
    white-space: nowrap;
}
.FS-odk-tl-borc   { color: #ea580c; }
.FS-odk-tl-alacak { color: #059669; }
/* Kalan — kırmızı pozitif (borç var), yeşil negatif/sıfır (temiz) */
.FS-odk-tl-kalan-pos { color: #dc2626; }
.FS-odk-tl-kalan-neg { color: #059669; }

/* İlerleme çubuğu — borç/alacak oranı gösterimi */
.FS-odk-bar-wrap {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #f1f5f9;
    overflow: hidden;
    margin-top: 4px;
}
.FS-odk-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #059669, #34d399);
    transition: width 0.3s ease;
}

/* Tablo satırı — premium hover */
.FS-odk-satir:hover td {
    background: rgba(249,115,22,0.03);
}
/* Genel toplam satırı */
.FS-odk-toplam td {
    background: #fffbeb !important;
    border-top: 2px solid #F97316;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* ── Dark Mode ── */
body.fos-dark .FS-odk-kart {
    background: var(--fos-dark-card);
    border-color: var(--fos-dark-border);
}
body.fos-dark .FS-odk-kart:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
body.fos-dark .FS-odk-etiket { color: #64748b; }
body.fos-dark .FS-odk-kart-borc .FS-odk-ikon   { background: rgba(249,115,22,0.15); }
body.fos-dark .FS-odk-kart-alacak .FS-odk-ikon { background: rgba(5,150,105,0.15); }
body.fos-dark .FS-odk-kart-kalan .FS-odk-ikon  { background: rgba(220,38,38,0.15); }
body.fos-dark .FS-odk-kart-kalan.negatif .FS-odk-ikon { background: rgba(5,150,105,0.15); }
body.fos-dark .FS-odk-kur {
    background: linear-gradient(135deg, #431407 0%, #451a03 100%);
    border-color: #7c2d12;
    border-left-color: #F97316;
    color: #fdba74;
}
body.fos-dark .FS-odk-kur i { color: #fb923c; }
body.fos-dark .FS-odk-kur strong { color: #fb923c; }
body.fos-dark .FS-odk-dvz {
    background: #1e293b;
    color: #94a3b8;
}
body.fos-dark .FS-odk-bar-wrap { background: #1e293b; }
body.fos-dark .FS-odk-satir:hover td { background: rgba(249,115,22,0.06); }
body.fos-dark .FS-odk-toplam td {
    background: rgba(249,115,22,0.08) !important;
    border-top-color: #F97316;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .FS-odk-ozet { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
    .FS-odk-kart { padding: 10px 12px; gap: 10px; }
    .FS-odk-ikon { width: 30px; height: 30px; min-width: 30px; font-size: 13px; }
    .FS-odk-deger { font-size: 16px; }
    .FS-odk-kur { flex-wrap: wrap; font-size: 11px; padding: 8px 10px; gap: 6px; }
    .FS-odk-tl { font-size: 13px; }
}


/* ================================================================
   IMPERSONATE BANNER — Admin başka kullanıcının gözünden bakıyor
   ================================================================ */

/* ── Light ── */
.FS-imp-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid #fdba74;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    box-shadow: 0 1px 3px rgba(249,115,22,0.12);
}

.FS-imp-banner-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.FS-imp-banner-icon {
    font-size: 18px;
    color: #ea580c;
    flex-shrink: 0;
}

.FS-imp-banner-text {
    font-size: 13px;
    font-weight: 600;
    color: #9a3412;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.FS-imp-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid #ea580c;
    border-radius: 6px;
    background: #ea580c;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
}

.FS-imp-banner-btn:hover {
    background: #c2410c;
    box-shadow: 0 2px 8px rgba(234,88,12,0.3);
}

/* ── Dark ── */
body.fos-dark .FS-imp-banner {
    background: linear-gradient(135deg, rgba(249,115,22,0.1) 0%, rgba(251,191,36,0.08) 100%);
    border-color: rgba(249,115,22,0.35);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.fos-dark .FS-imp-banner-icon {
    color: #fb923c;
}

body.fos-dark .FS-imp-banner-text {
    color: #fdba74;
}

body.fos-dark .FS-imp-banner-btn {
    background: #ea580c;
    border-color: #ea580c;
    color: #fff;
}

body.fos-dark .FS-imp-banner-btn:hover {
    background: #f97316;
    box-shadow: 0 2px 8px rgba(249,115,22,0.4);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .FS-imp-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }
    .FS-imp-banner-left { justify-content: center; }
    .FS-imp-banner-text { white-space: normal; text-align: center; font-size: 12px; }
    .FS-imp-banner-btn { justify-content: center; }
}


/* ================================================================
   DASHBOARD CTA — Katılımcı "Yeni Satış Gir" büyük buton
   ================================================================ */

/* ── Light ── */
.FS-dash-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 16px rgba(249,115,22,0.25);
    transition: transform 0.15s, box-shadow 0.15s;
}

.FS-dash-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(249,115,22,0.35);
    color: #fff;
    text-decoration: none;
}

.FS-dash-cta-icon { font-size: 28px; opacity: 0.9; }
.FS-dash-cta-text { flex: 1; }
.FS-dash-cta-arrow { font-size: 20px; opacity: 0.7; }

/* ── Dark ── */
body.fos-dark .FS-dash-cta {
    background: linear-gradient(135deg, rgba(249,115,22,0.85) 0%, rgba(251,191,36,0.7) 100%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

body.fos-dark .FS-dash-cta:hover {
    box-shadow: 0 6px 24px rgba(249,115,22,0.4);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .FS-dash-cta {
        padding: 14px 16px;
        font-size: 14px;
        gap: 10px;
    }
    .FS-dash-cta-icon { font-size: 22px; }
    .FS-dash-cta-arrow { font-size: 16px; }
}


/* ================================================================
   SATIŞ HİNT — Barkodlu/detaylı satış bilgi kutusu
   ================================================================ */

/* ── Light ── */
.FS-satis-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
}

.FS-satis-hint-icon {
    font-size: 24px;
    color: #94a3b8;
    flex-shrink: 0;
}

.FS-satis-hint-text {
    flex: 1;
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

.FS-satis-hint-btn { flex-shrink: 0; }

/* ── Dark ── */
body.fos-dark .FS-satis-hint {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
}

body.fos-dark .FS-satis-hint-icon { color: #64748b; }
body.fos-dark .FS-satis-hint-text { color: #94a3b8; }

/* ── Mobile ── */
@media (max-width: 768px) {
    .FS-satis-hint {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 12px;
    }
    .FS-satis-hint-icon { font-size: 20px; }
    .FS-satis-hint-text { font-size: 12px; }
}

/* ── FS-satis-info — Katılımcı firma bilgi notu ── */
.FS-satis-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.15);
    font-size: 13px;
    color: #475569;
}
.FS-satis-info i { color: #6366f1; font-size: 16px; flex-shrink: 0; }
.FS-satis-info strong { color: #1e293b; }
/* Dark */
body.fos-dark .FS-satis-info {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.2);
    color: #cbd5e1;
}
body.fos-dark .FS-satis-info i { color: #818cf8; }
body.fos-dark .FS-satis-info strong { color: #f1f5f9; }
/* Mobile */
@media (max-width: 768px) {
    .FS-satis-info { font-size: 12px; padding: 8px 12px; }
}


/* ================================================================
   DASHBOARD STAT KARTLARI — Özet istatistik kutucukları
   ================================================================ */

/* ── Light ── */
/* Kart — sol accent, ikon + başlık + 2 satır (adet + tutar) */
.FS-dash-stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    position: relative;
    overflow: hidden;
}
/* Sol accent çizgisi — gradient */
.FS-dash-stat-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #F97316, #FBBF24);
    border-radius: 3px 0 0 3px;
}
.FS-dash-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(249,115,22,0.08);
}
/* Kart üst satır: ikon + başlık yan yana */
.FS-dash-stat-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.FS-dash-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 20px;
    flex-shrink: 0;
}
.FS-dash-stat-lbl {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    line-height: 1.3;
}
/* Kart değer satırları — adet ve tutar */
.FS-dash-stat-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 56px; /* ikon genişliği (44) + gap (12) */
}
.FS-dash-stat-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.FS-dash-stat-val {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.FS-dash-stat-unit {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}
.FS-dash-stat-tutar {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    line-height: 1.2;
}
/* Onay oranı — tek büyük değer, satır yok */
.FS-dash-stat-val-solo {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    padding-left: 56px;
}

/* Onay oranı progress bar */
.FS-dash-stat-progress {
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    margin: 4px 0 0 56px;
    overflow: hidden;
}
.FS-dash-stat-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4);
    transition: width 0.6s ease;
}

/* ── Dark ── */
body.fos-dark .FS-dash-stat-card {
    background: var(--fos-dark-card, #1e293b);
    border-color: rgba(255,255,255,0.06);
}
body.fos-dark .FS-dash-stat-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 2px 8px rgba(249,115,22,0.12); }
body.fos-dark .FS-dash-stat-val,
body.fos-dark .FS-dash-stat-val-solo { color: #f1f5f9; }
body.fos-dark .FS-dash-stat-lbl { color: #94a3b8; }
body.fos-dark .FS-dash-stat-tutar { color: #cbd5e1; }
body.fos-dark .FS-dash-stat-unit { color: #64748b; }
body.fos-dark .FS-dash-stat-progress { background: rgba(255,255,255,0.08); }

/* ── Mobile ── */
@media (max-width: 768px) {
    .FS-dash-stat-card { padding: 12px 14px; gap: 6px; border-radius: 10px; }
    .FS-dash-stat-icon { width: 36px; height: 36px; font-size: 17px; border-radius: 10px; }
    .FS-dash-stat-rows { padding-left: 48px; }
    .FS-dash-stat-val { font-size: 18px; }
    .FS-dash-stat-tutar { font-size: 12px; }
    .FS-dash-stat-lbl { font-size: 9px; }
    .FS-dash-stat-val-solo { font-size: 22px; padding-left: 48px; }
    .FS-dash-stat-progress { margin-left: 48px; }
}


/* ================================================================
   DASHBOARD MINI STAT — Güccük istatistik kartı
   ================================================================ */

/* ── Light ── */
.FS-dash-mini {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
/* Sol accent çizgisi — gradient */
.FS-dash-mini::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #F97316, #FBBF24);
    border-radius: 3px 0 0 3px;
}
.FS-dash-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(249,115,22,0.08);
}
/* İkon — yuvarlak arka planlı, büyük */
.FS-dash-mini-ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.FS-dmi-orange { color: #ea580c; background: rgba(249,115,22,0.10); }
.FS-dmi-green  { color: #16a34a; background: rgba(22,163,106,0.10); }
.FS-dmi-blue   { color: #2563eb; background: rgba(37,99,235,0.10); }
.FS-dmi-purple { color: #9333ea; background: rgba(147,51,234,0.10); }
.FS-dmi-red    { color: #dc2626; background: rgba(220,38,38,0.10); }
/* İçerik bloğu — sağ taraf */
.FS-dash-mini-body { flex: 1; min-width: 0; }
/* Değer — büyük bold */
.FS-dash-mini-val { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.1; }
/* Etiket — küçük uppercase */
.FS-dash-mini-lbl { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-top: 2px; }
/* Alt badge satırı */
.FS-dash-mini-sub { display: flex; gap: 4px; margin-top: 6px; }

/* ── Dark ── */
body.fos-dark .FS-dash-mini { background: var(--fos-dark-card, #1e293b); border-color: rgba(255,255,255,0.06); }
body.fos-dark .FS-dash-mini:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 2px 8px rgba(249,115,22,0.12); }
body.fos-dark .FS-dash-mini-val { color: #f1f5f9; }
body.fos-dark .FS-dash-mini-lbl { color: #94a3b8; }
body.fos-dark .FS-dmi-orange { background: rgba(249,115,22,0.15); }
body.fos-dark .FS-dmi-green  { background: rgba(22,163,106,0.15); }
body.fos-dark .FS-dmi-blue   { background: rgba(37,99,235,0.15); }
body.fos-dark .FS-dmi-purple { background: rgba(147,51,234,0.15); }
body.fos-dark .FS-dmi-red    { background: rgba(220,38,38,0.15); }

/* ── Mobile ── */
@media (max-width: 768px) {
    .FS-dash-mini { padding: 12px 14px; gap: 10px; border-radius: 10px; }
    .FS-dash-mini-ico { width: 36px; height: 36px; font-size: 17px; border-radius: 10px; }
    .FS-dash-mini-val { font-size: 18px; }
    .FS-dash-mini-lbl { font-size: 9px; }
}


/* ================================================================
   DASHBOARD ADMIN STAT — İkon + değer + etiket compact kart
   ================================================================ */

/* ── Light ── */
/* Wrapper — ikon solda, body sağda */
.FS-dash-stat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, #F97316, #FBBF24) 1;
    height: 100%;
    transition: transform 0.15s, box-shadow 0.15s;
}
.FS-dash-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
/* İkon daire — renk varyantları */
.FS-dash-stat .FS-dash-stat-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.FS-dash-stat-orange { background: rgba(249,115,22,0.12); color: #ea580c; }
.FS-dash-stat-green  { background: rgba(34,197,94,0.12);  color: #16a34a; }
.FS-dash-stat-blue   { background: rgba(59,130,246,0.12); color: #2563eb; }
.FS-dash-stat-purple { background: rgba(168,85,247,0.12); color: #9333ea; }
.FS-dash-stat-red    { background: rgba(239,68,68,0.12);  color: #dc2626; }
/* Body — değer + etiket + alt satır */
.FS-dash-stat-body { flex: 1; min-width: 0; }
.FS-dash-stat-body .FS-dash-stat-val {
    font-size: 22px; font-weight: 700; color: #1e293b; line-height: 1.2;
}
.FS-dash-stat-body .FS-dash-stat-lbl {
    font-size: 11px; color: #64748b; text-transform: uppercase;
    letter-spacing: 0.3px; font-weight: 600; margin-top: 2px;
}
/* Alt bilgi satırı — badge'ler */
.FS-dash-stat-sub { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ── Dark ── */
body.fos-dark .FS-dash-stat {
    background: var(--fos-dark-card, #1e293b);
    border-color: rgba(255,255,255,0.06);
}
body.fos-dark .FS-dash-stat-body .FS-dash-stat-val { color: #f1f5f9; }
body.fos-dark .FS-dash-stat-body .FS-dash-stat-lbl { color: #94a3b8; }
body.fos-dark .FS-dash-stat-orange { background: rgba(249,115,22,0.18); }
body.fos-dark .FS-dash-stat-green  { background: rgba(34,197,94,0.18); }
body.fos-dark .FS-dash-stat-blue   { background: rgba(59,130,246,0.18); }
body.fos-dark .FS-dash-stat-purple { background: rgba(168,85,247,0.18); }
body.fos-dark .FS-dash-stat-red    { background: rgba(239,68,68,0.18); }

/* ── Mobile ── */
@media (max-width: 768px) {
    .FS-dash-stat { padding: 10px 12px; gap: 8px; }
    .FS-dash-stat .FS-dash-stat-icon { width: 32px; height: 32px; font-size: 15px; }
    .FS-dash-stat-body .FS-dash-stat-val { font-size: 18px; }
    .FS-dash-stat-body .FS-dash-stat-lbl { font-size: 10px; }
}


/* ================================================================
   DASHBOARD TOP 10 — Sıralı liste + progress bar
   ================================================================ */

/* ── Light ── */
.FS-dash-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.FS-dash-top-row:last-child { border-bottom: none; }

.FS-dash-top-sira {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.FS-dash-top-row:nth-child(1) .FS-dash-top-sira {
    background: linear-gradient(135deg, #F97316, #FBBF24);
    color: #fff;
}

.FS-dash-top-row:nth-child(2) .FS-dash-top-sira {
    background: #94a3b8;
    color: #fff;
}

.FS-dash-top-row:nth-child(3) .FS-dash-top-sira {
    background: #c2956a;
    color: #fff;
}

.FS-dash-top-bilgi { flex: 1; min-width: 0; }

.FS-dash-top-ad {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.FS-dash-top-bar {
    height: 5px;
    border-radius: 3px;
    background: #e2e8f0;
    overflow: hidden;
}

.FS-dash-top-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    transition: width 0.6s ease;
}

.FS-dash-top-bar-ciro .FS-dash-top-bar-fill {
    background: linear-gradient(90deg, #F97316, #FBBF24);
}

.FS-dash-top-deger {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    flex-shrink: 0;
    min-width: 60px;
    text-align: right;
}

/* ── Dark ── */
body.fos-dark .FS-dash-top-row { border-bottom-color: rgba(255,255,255,0.05); }
body.fos-dark .FS-dash-top-sira { background: rgba(255,255,255,0.08); color: #94a3b8; }
body.fos-dark .FS-dash-top-row:nth-child(1) .FS-dash-top-sira { background: linear-gradient(135deg, #F97316, #FBBF24); color: #fff; }
body.fos-dark .FS-dash-top-row:nth-child(2) .FS-dash-top-sira { background: #64748b; color: #fff; }
body.fos-dark .FS-dash-top-row:nth-child(3) .FS-dash-top-sira { background: #92754f; color: #fff; }
body.fos-dark .FS-dash-top-ad { color: #e2e8f0; }
body.fos-dark .FS-dash-top-bar { background: rgba(255,255,255,0.06); }
body.fos-dark .FS-dash-top-deger { color: #f1f5f9; }

/* ── Mobile ── */
@media (max-width: 768px) {
    .FS-dash-top-row { gap: 8px; padding: 6px 0; }
    .FS-dash-top-ad { font-size: 12px; }
    .FS-dash-top-deger { font-size: 12px; min-width: 50px; }
}

/* ── FS-chart — Pure CSS bar chart (günlük satış grafiği) ── */
.FS-chart-wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 180px;
    padding: 8px 0 0 0;
}
.FS-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}
.FS-chart-bar {
    width: 100%;
    max-width: 40px;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #f97316 0%, #fbbf24 100%);
    transition: height 0.4s ease;
}
.FS-chart-label {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 6px;
    white-space: nowrap;
}
.FS-chart-tooltip {
    font-size: 10px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    margin-bottom: 4px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
}
.FS-chart-col:hover .FS-chart-tooltip {
    opacity: 1;
    transform: translateY(0);
}
.FS-chart-col:hover .FS-chart-bar {
    background: linear-gradient(180deg, #ea580c 0%, #f97316 100%);
    box-shadow: 0 0 8px rgba(249,115,22,0.4);
}
/* Dark */
body.fos-dark .FS-chart-label { color: #64748b; }
body.fos-dark .FS-chart-tooltip { color: #e2e8f0; }
body.fos-dark .FS-chart-bar {
    background: linear-gradient(180deg, #f97316 0%, #d97706 100%);
}
body.fos-dark .FS-chart-col:hover .FS-chart-bar {
    box-shadow: 0 0 10px rgba(249,115,22,0.5);
}
/* Mobile — daha küçük yükseklik ve font */
@media (max-width: 768px) {
    .FS-chart-wrap { height: 120px; gap: 3px; }
    .FS-chart-label { font-size: 8px; }
    .FS-chart-tooltip { font-size: 8px; }
    .FS-chart-bar { max-width: 24px; }
}

/* ── FS-dash-compact — Son satınalmalar compact tablosu ── */
/* Desktop — kompakt padding */
.FS-dash-compact th,
.FS-dash-compact td { padding: 8px 10px; font-size: 13px; }
.FS-dash-compact .fos-badge { font-size: 11px; padding: 2px 8px; }
/* Dark — ek override gerekmez, fos-table dark zaten çalışır */

/* Mobile — kart satırları, thead gizli, td blok */
@media (max-width: 768px) {
    .FS-dash-compact thead { display: none; }
    .FS-dash-compact tbody tr {
        display: block;
        background: var(--fos-light-card, #fff);
        border: 1px solid #e2e8f0;
        border-left: 3px solid #f97316;
        border-radius: 8px;
        margin-bottom: 8px;
        padding: 10px 12px;
    }
    body.fos-dark .FS-dash-compact tbody tr {
        background: var(--fos-dark-card, #1e293b);
        border-color: #334155;
        border-left-color: #f97316;
    }
    .FS-dash-compact td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 3px 0;
        border: none;
        font-size: 13px;
    }
    .FS-dash-compact td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 11px;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        min-width: 80px;
        flex-shrink: 0;
    }
    body.fos-dark .FS-dash-compact td::before { color: #94a3b8; }
    /* İşlemler kolonu — onayla butonu sağa yapışık, tam genişlik */
    .FS-dash-compact td:last-child {
        justify-content: flex-end;
        padding-top: 6px;
        margin-top: 4px;
        border-top: 1px solid #f1f5f9;
    }
    body.fos-dark .FS-dash-compact td:last-child { border-top-color: #334155; }
    /* Onayla butonu mobilde biraz daha büyük — kolay dokunma */
    .FS-dash-compact td:last-child .fos-btn {
        padding: 5px 14px;
        font-size: 13px;
    }
}

/* ═══════════════════════════════════════════════════════════
   FS-BARKOD — Barkodlu (Detaylı) Satış Bileşenleri
   ═══════════════════════════════════════════════════════════ */

/* ── Satış Başlık Bandı ─────────────────────────────────── */
.FS-barkod-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    border: 1px solid #fed7aa;
    border-left: 3px solid #f97316;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 16px;
}
body.fos-dark .FS-barkod-baslik {
    background: linear-gradient(135deg, rgba(249,115,22,.08) 0%, var(--fos-dark-card) 100%);
    border-color: rgba(249,115,22,.25);
    border-left-color: #f97316;
}
.FS-barkod-baslik-sol {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.FS-barkod-baslik-sag {
    display: flex;
    align-items: center;
    gap: 8px;
}
.FS-barkod-ilerleme {
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

/* ── Barkod Input — büyük, tarayıcı dostu ───────────────── */
.FS-barkod-input {
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: 1px;
}

/* ── "Ürün bulunamadı" stil — kırmızı italik ────────────── */
.FS-barkod-bulunamadi {
    color: #dc2626 !important;
    font-style: italic;
}
body.fos-dark .FS-barkod-bulunamadi {
    color: #f87171 !important;
}

/* ── Genel Toplam Bandı ─────────────────────────────────── */
.FS-barkod-toplam {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 12px;
    background: linear-gradient(135deg, #fff7ed, #fffbeb);
    border: 1px solid #fed7aa;
    border-radius: 8px;
}
body.fos-dark .FS-barkod-toplam {
    background: linear-gradient(135deg, rgba(249,115,22,.1), rgba(251,191,36,.06));
    border-color: rgba(249,115,22,.25);
}
.FS-barkod-toplam-etiket {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}
body.fos-dark .FS-barkod-toplam-etiket {
    color: #94a3b8;
}
.FS-barkod-toplam-deger {
    font-size: 22px;
    font-weight: 800;
    color: #f97316;
}

/* ── Devam Et Listesi — yarım kalan satışlar ─────────── */
.FS-barkod-devam-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.FS-barkod-devam-item:hover {
    border-color: #f97316;
    box-shadow: 0 0 0 2px rgba(249,115,22,.1);
    text-decoration: none;
    color: inherit;
}
body.fos-dark .FS-barkod-devam-item {
    border-color: #334155;
    background: var(--fos-dark-card);
}
body.fos-dark .FS-barkod-devam-item:hover {
    border-color: #f97316;
    box-shadow: 0 0 0 2px rgba(249,115,22,.15);
}
.FS-barkod-devam-sol {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.FS-barkod-devam-sag {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
/* Devam et link — item içindeki genişleyen tıklanabilir alan */
.FS-barkod-devam-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.FS-barkod-devam-link:hover { text-decoration: none; color: inherit; }
/* Chevron — sağ ok ikonu */
.FS-barkod-devam-chevron {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
}

/* ── MOBİL (768px altı) ──────────────────────────────── */
@media (max-width: 768px) {
    .FS-barkod-baslik {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 8px 12px;
    }
    .FS-barkod-baslik-sol { font-size: 13px; flex-wrap: wrap; }
    .FS-barkod-toplam {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        padding: 10px 12px;
    }
    .FS-barkod-toplam-deger { font-size: 18px; }
    .FS-barkod-devam-item {
        flex-wrap: wrap;
        padding: 8px 10px;
    }
    .FS-barkod-devam-sag {
        width: 100%;
        justify-content: space-between;
        margin-top: 4px;
    }
}

/* ── Detaylı Satış Nedir — açılır bilgi kutusu ────────── */
.FS-barkod-details {
    margin-top: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .2s;
}
.FS-barkod-details[open] {
    border-color: #f97316;
}
body.fos-dark .FS-barkod-details {
    border-color: #334155;
}
body.fos-dark .FS-barkod-details[open] {
    border-color: #f97316;
}
.FS-barkod-details-ozet {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #6366f1;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: #f8fafc;
    transition: background .15s;
}
.FS-barkod-details-ozet:hover {
    background: #eef2ff;
}
.FS-barkod-details-ozet::-webkit-details-marker { display: none; }
.FS-barkod-details-ozet::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    margin-left: auto;
    font-size: 11px;
    transition: transform .2s;
}
.FS-barkod-details[open] .FS-barkod-details-ozet::after {
    transform: rotate(180deg);
}
body.fos-dark .FS-barkod-details-ozet {
    background: var(--fos-dark-card);
    color: #818cf8;
}
body.fos-dark .FS-barkod-details-ozet:hover {
    background: rgba(99,102,241,.08);
}
.FS-barkod-details-icerik {
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.7;
    color: #475569;
    border-top: 1px solid #e2e8f0;
}
body.fos-dark .FS-barkod-details-icerik {
    color: #cbd5e1;
    border-top-color: #334155;
}
@media (max-width: 768px) {
    .FS-barkod-details-ozet { padding: 8px 12px; font-size: 12px; }
    .FS-barkod-details-icerik { padding: 10px 12px; font-size: 12px; }
}

/* ── RAPOR KPI KARTLARI ───────────────────────────────────── */
/* Dashboard KPI kartı — dikey layout, merkezi ikon */
.FS-rpr-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all .2s ease;
}
/* Sol kenar accent — FuarOS imza */
.FS-rpr-kpi::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #F97316, #FBBF24);
    border-radius: 12px 0 0 12px;
}
.FS-rpr-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249,115,22,.1);
}
/* İkon dairesi */
.FS-rpr-kpi-ico {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
/* Değer */
.FS-rpr-kpi-val {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
/* Etiket */
.FS-rpr-kpi-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Dark mode */
body.fos-dark .FS-rpr-kpi {
    background: var(--fos-dark-card);
    border-color: var(--fos-dark-border);
}
body.fos-dark .FS-rpr-kpi-val { color: #e2e8f0; }
body.fos-dark .FS-rpr-kpi-lbl { color: #64748b; }
body.fos-dark .FS-rpr-kpi:hover { box-shadow: 0 6px 20px rgba(249,115,22,.15); }
/* Mobile */
@media (max-width: 768px) {
    .FS-rpr-kpi { padding: 12px 8px 10px; }
    .FS-rpr-kpi-ico { width: 32px; height: 32px; font-size: 15px; }
    .FS-rpr-kpi-val { font-size: 18px; }
    .FS-rpr-kpi-lbl { font-size: 10px; }
}

/* ── RAPOR GRAFİK KARTLARI ───────────────────────────────── */
/* Chart.js canvas wrapper kartı */
.FS-rpr-chart-card { min-height: 340px; }
.FS-rpr-chart-card .fos-card-body { padding: 12px 16px; }
/* Chart body — canvas container */
.FS-rpr-chart-body { display: flex; align-items: center; justify-content: center; min-height: 280px; }
/* Dark mode — Chart.js canvas arka plan */
body.fos-dark .FS-rpr-chart-card .fos-card-body { background: var(--fos-dark-card); }

/* ── RAPOR LİNK KARTLARI ─────────────────────────────────── */
/* Rapor ana sayfasındaki alt rapor navigasyon kartları */
.FS-rpr-link-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: #1e293b;
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}
/* Sol kenar accent — FuarOS imza */
.FS-rpr-link-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #F97316, #FBBF24);
    border-radius: 10px 0 0 10px;
    opacity: 0;
    transition: opacity .2s ease;
}
.FS-rpr-link-card:hover::before,
.FS-rpr-link-active::before { opacity: 1; }
.FS-rpr-link-card:hover {
    border-color: #F97316;
    box-shadow: 0 4px 12px rgba(249,115,22,.12);
    transform: translateY(-1px);
}
/* Aktif kart vurgusu */
.FS-rpr-link-active {
    border-color: #F97316;
    background: linear-gradient(135deg, #fff7ed, #fff);
}
/* İkon */
.FS-rpr-link-ico { font-size: 22px; flex-shrink: 0; }
/* Metin */
.FS-rpr-link-text { flex: 1; font-size: 13px; font-weight: 600; }
/* Ok ikonu */
.FS-rpr-link-arrow { font-size: 14px; color: #94a3b8; transition: transform .2s ease; }
.FS-rpr-link-card:hover .FS-rpr-link-arrow { transform: translateX(3px); color: #F97316; }

/* Dark mode */
body.fos-dark .FS-rpr-link-card {
    background: var(--fos-dark-card);
    border-color: var(--fos-dark-border);
    color: #e2e8f0;
}
body.fos-dark .FS-rpr-link-card:hover {
    border-color: #F97316;
    box-shadow: 0 4px 12px rgba(249,115,22,.2);
}
body.fos-dark .FS-rpr-link-active {
    border-color: #F97316;
    background: linear-gradient(135deg, rgba(249,115,22,.08), var(--fos-dark-card));
}
body.fos-dark .FS-rpr-link-arrow { color: #64748b; }

/* Mobile */
@media (max-width: 768px) {
    .FS-rpr-link-card { padding: 10px 12px; gap: 8px; }
    .FS-rpr-link-ico { font-size: 18px; }
    .FS-rpr-link-text { font-size: 12px; }
}

/* ===== RAPOR DASHBOARD LAYOUT ===== */

/* Ana flex container — sidebar + content */
.FS-rpr-dash {
    display: flex;
    gap: 16px;
    min-height: calc(100vh - 120px);
}

/* Sol filtre paneli */
.FS-rpr-sidebar {
    width: 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Filtre grubu — her biri ayrı kart */
.FS-rpr-filter-group {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    border-left: 3px solid #F97316;
}

/* Filtre başlığı */
.FS-rpr-filter-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;
    padding: 10px 12px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.FS-rpr-filter-title i { color: #F97316; font-size: 13px; }
/* Filtre temizle × butonu — title sağına yapışır */
.FS-rpr-flt-temizle {
    margin-left: auto;
    cursor: pointer;
    color: #ef4444;
    font-size: 9px;
    font-weight: 700;
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    transition: background .15s, color .15s, border-color .15s;
    line-height: 1;
}
.FS-rpr-flt-temizle:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
body.fos-dark .FS-rpr-flt-temizle { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.3); }
body.fos-dark .FS-rpr-flt-temizle:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* Filtre arama inputu */
.FS-rpr-filter-search { padding: 0 8px 6px; }
.FS-rpr-filter-search input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    outline: none;
    background: #f8fafc;
    transition: border-color .2s;
}
.FS-rpr-filter-search input:focus { border-color: #F97316; }

/* Filtre listesi — scroll */
.FS-rpr-filter-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0 4px 6px;
}
.FS-rpr-filter-list::-webkit-scrollbar { width: 4px; }
.FS-rpr-filter-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Filtre item — tıklanabilir satır */
.FS-rpr-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #334155;
    transition: background .15s, color .15s;
}
.FS-rpr-filter-item:hover { background: #f1f5f9; }
.FS-rpr-filter-item.active {
    background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
    color: #9a3412;
    font-weight: 600;
}

/* Filtre item parçaları */
.FS-rpr-fi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.FS-rpr-fi-adi {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.FS-rpr-fi-meta {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}
.FS-rpr-filter-item.active .FS-rpr-fi-meta { color: #c2410c; }

/* Sağ ana içerik alanı */
.FS-rpr-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* KPI bar — 6 kartlık flex wrap */
.FS-rpr-kpi-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.FS-rpr-kpi-bar .FS-rpr-kpi { flex: 1 1 140px; min-width: 120px; }

/* Sol panel mini tablo — kolon başlıkları */
.FS-rpr-ftbl-head {
    display: flex;
    align-items: center;
    padding: 4px 8px 2px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #94a3b8;
    gap: 4px;
}
.FS-rpr-ftbl-h-adi { flex: 1; cursor: pointer; user-select: none; }
.FS-rpr-ftbl-h-num { width: 74px; text-align: right; cursor: pointer; user-select: none; white-space: nowrap; }
.FS-rpr-ftbl-h-adi:hover, .FS-rpr-ftbl-h-num:hover { color: #F97316; }
/* Sıralama ok ikonu */
.FS-rpr-ftbl-head [data-sort]::after { content: ''; margin-left: 2px; }
.FS-rpr-ftbl-head .sort-asc::after { content: ' \25B2'; font-size: 8px; color: #F97316; }
.FS-rpr-ftbl-head .sort-desc::after { content: ' \25BC'; font-size: 8px; color: #F97316; }

/* Sol panel mini tablo — satır */
.FS-rpr-ftbl-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.FS-rpr-ftbl-adi {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.FS-rpr-ftbl-num {
    width: 74px;
    text-align: right;
    font-size: 10px;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.FS-rpr-filter-item.active .FS-rpr-ftbl-num { color: #c2410c; font-weight: 600; }

/* === DARK MODE === */
body.fos-dark .FS-rpr-ftbl-head { border-color: var(--fos-dark-border); color: #64748b; }
body.fos-dark .FS-rpr-ftbl-num { color: #64748b; }
body.fos-dark .FS-rpr-filter-item.active .FS-rpr-ftbl-num { color: #f97316; }
body.fos-dark .FS-rpr-filter-group {
    background: var(--fos-dark-card);
    border-color: var(--fos-dark-border);
    border-left-color: #F97316;
}
body.fos-dark .FS-rpr-filter-title { color: #94a3b8; }
body.fos-dark .FS-rpr-filter-search input {
    background: var(--fos-dark-base);
    border-color: var(--fos-dark-border);
    color: #e2e8f0;
}
body.fos-dark .FS-rpr-filter-search input:focus { border-color: #F97316; }
body.fos-dark .FS-rpr-filter-list::-webkit-scrollbar-thumb { background: #475569; }
body.fos-dark .FS-rpr-filter-item { color: #cbd5e1; }
body.fos-dark .FS-rpr-filter-item:hover { background: rgba(255,255,255,.05); }
body.fos-dark .FS-rpr-filter-item.active {
    background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(249,115,22,.04));
    color: #fb923c;
}
body.fos-dark .FS-rpr-fi-meta { color: #64748b; }
body.fos-dark .FS-rpr-filter-item.active .FS-rpr-fi-meta { color: #f97316; }

/* === MOBILE === */
@media (max-width: 768px) {
    .FS-rpr-dash { flex-direction: column; }
    .FS-rpr-sidebar { width: 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; }
    .FS-rpr-filter-group { flex: 1 1 200px; }
    .FS-rpr-filter-list { max-height: 140px; }
    .FS-rpr-kpi-bar .FS-rpr-kpi { flex: 1 1 100px; min-width: 90px; }
}

/* ═══════════════════════════════════════════════════════════
   CROSS-FUAR İSTATİSTİK — Cari Detay drawer fuar kartları
   ═══════════════════════════════════════════════════════════ */
.oda-cdp-cf-fuar { margin-bottom: 10px; padding: 10px; border-radius: 8px; background: rgba(249,115,22,.03); border: 1px solid rgba(249,115,22,.12); }
.oda-cdp-cf-fuar-baslik { font-size: 12px; font-weight: 700; color: #F97316; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.oda-cdp-cf-fuar-baslik i { font-size: 13px; }
body.fos-dark .oda-cdp-cf-fuar { background: rgba(249,115,22,.06); border-color: rgba(249,115,22,.15); }

/* ═══════════════════════════════════════════════════════════
   CROSS-FUAR İSTATİSTİK — Cari Detay özet kartları (kullanılmıyor — silme adayı)
   ═══════════════════════════════════════════════════════════ */
.FS-cf-ozet-kart {
    background: var(--fos-light-surface, #fff);
    border: 1px solid var(--fos-light-border, #e2e8f0);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    border-left: 3px solid var(--fos-accent, #F97316);
    transition: box-shadow .2s;
}
.FS-cf-ozet-kart:hover { box-shadow: 0 2px 8px rgba(249,115,22,.12); }
.FS-cf-ozet-sayi { font-size: 28px; font-weight: 700; color: var(--fos-accent, #F97316); }
.FS-cf-ozet-etiket { font-size: 12px; color: var(--fos-text-muted, #94a3b8); text-transform: uppercase; font-weight: 600; margin-top: 4px; }
.FS-cf-ozet-basari { border-left-color: #22c55e; }
.FS-cf-ozet-basari .FS-cf-ozet-sayi { color: #22c55e; }
.FS-cf-ozet-uyari { border-left-color: #eab308; }
.FS-cf-ozet-uyari .FS-cf-ozet-sayi { color: #eab308; }

/* Dark */
body.fos-dark .FS-cf-ozet-kart { background: var(--fos-dark-card, #1e293b); border-color: var(--fos-dark-border, #334155); }

/* Mobile */
@media (max-width: 768px) {
    .FS-cf-ozet-sayi { font-size: 22px; }
    .FS-cf-ozet-kart { padding: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   TANITIM (VİTRİN) MODÜLÜ — FS-tnt-*
   Firma kartları, medya galerisi, görüntüleyici, dil sekmeleri.
   KURAL 14: her kural light + dark + mobile ile birlikte yazılır.
   ════════════════════════════════════════════════════════════════ */

/* ── Bilgi satırı ── */
.FS-tnt-hint { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

/* ── Firma kartı ızgarası ── */
.FS-tnt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.FS-tnt-kart {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg);
    box-shadow: var(--fos-shadow-xs);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: box-shadow .18s var(--fos-ease), transform .18s var(--fos-ease);
}
/* Sol kenar turuncu accent — FuarOS görsel imzası */
.FS-tnt-kart::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--fos-accent-grad);
    opacity: .85;
}
.FS-tnt-kart:hover {
    box-shadow: var(--fos-shadow-md);
    transform: translateY(-2px);
    color: inherit;
}

/* ── Logo alanı ── */
.FS-tnt-logo-wrap {
    flex: 0 0 auto;
    width: 60px; height: 60px;
    border-radius: var(--fos-radius);
    background: var(--fos-light-bg);
    border: 1px solid var(--fos-light-border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.FS-tnt-logo-buyuk { width: 88px; height: 88px; }
.FS-tnt-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.FS-tnt-logo-harf {
    font-size: 26px; font-weight: 700; color: #fff;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--fos-accent-grad);
}
.FS-tnt-logo-buyuk .FS-tnt-logo-harf { font-size: 36px; }

/* ── Kart metin alanı ── */
.FS-tnt-kart-icerik { flex: 1 1 auto; min-width: 0; }
.FS-tnt-ad {
    font-size: 14px; font-weight: 600; color: var(--fos-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.FS-tnt-metin {
    font-size: 12px; color: var(--fos-text-secondary); margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.FS-tnt-alt { margin-top: 6px; }
.FS-tnt-ok { flex: 0 0 auto; color: var(--fos-text-muted); font-size: 16px; }

/* ── Firma kimlik bloğu (galeri üstü) ── */
.FS-tnt-firma { display: flex; gap: 14px; align-items: flex-start; }
.FS-tnt-firma-bilgi { flex: 1 1 auto; min-width: 0; }
.FS-tnt-firma-ad { font-size: 16px; font-weight: 700; color: var(--fos-text-primary); }
.FS-tnt-firma-metin {
    font-size: 13px; color: var(--fos-text-secondary);
    margin-top: 6px; white-space: pre-line; line-height: 1.55;
}
.FS-tnt-firma-web { font-size: 12px; color: var(--fos-orange); margin-top: 6px; }

/* ── Medya ızgarası ── */
.FS-tnt-medya-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.FS-tnt-medya {
    display: flex; flex-direction: column;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg);
    overflow: hidden;
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .18s var(--fos-ease), transform .18s var(--fos-ease);
}
.FS-tnt-medya:hover { box-shadow: var(--fos-shadow-md); transform: translateY(-2px); }

/* ── Önizleme alanı ── */
.FS-tnt-thumb {
    position: relative;
    height: 132px;
    display: flex; align-items: center; justify-content: center;
    background: var(--fos-light-bg);
    overflow: hidden;
}
.FS-tnt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.FS-tnt-thumb i { font-size: 38px; color: var(--fos-text-muted); }
/* Tipe göre ikon rengi: 1=PDF 2=Video 3=Resim */
.FS-tnt-thumb-1 i { color: var(--fos-danger); }
.FS-tnt-thumb-2 i { color: var(--fos-info); }
.FS-tnt-thumb-3 i { color: var(--fos-success); }
.FS-tnt-tip-rozet {
    position: absolute; top: 6px; left: 6px;
    background: rgba(15, 23, 42, .78);
    color: #fff; font-size: 10px; font-weight: 600;
    padding: 2px 7px; border-radius: 20px;
    letter-spacing: .3px;
}

/* ── Medya kart metni ── */
.FS-tnt-medya-bilgi { padding: 10px 12px 12px; }
.FS-tnt-medya-baslik {
    font-size: 13px; font-weight: 600; color: var(--fos-text-primary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.FS-tnt-medya-aciklama {
    font-size: 11.5px; color: var(--fos-text-secondary); margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.FS-tnt-medya-meta {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 8px; font-size: 11px; color: var(--fos-text-muted);
}

/* ── Görüntüleyici (tam ekran) ── */
.FS-tnt-viewer {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(7, 13, 26, .94);
    display: flex; flex-direction: column;
}
.FS-tnt-viewer-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px;
    background: var(--fos-dark-surface);
    border-bottom: 1px solid var(--fos-dark-border);
}
.FS-tnt-viewer-baslik {
    color: var(--fos-dark-text); font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.FS-tnt-viewer-butonlar { display: flex; gap: 6px; flex: 0 0 auto; }
.FS-tnt-viewer-govde {
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 12px;
}
.FS-tnt-viewer-frame { width: 100%; height: 100%; border: 0; background: #fff; border-radius: var(--fos-radius); }
.FS-tnt-viewer-video { max-width: 100%; max-height: 100%; border-radius: var(--fos-radius); background: #000; }
.FS-tnt-viewer-img   { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--fos-radius); }
/* Görüntüleyici açıkken arka plan kaymasın */
body.FS-tnt-kilit { overflow: hidden; }

/* ── Dil sekmeleri (4 dil = 2 alan + 4 sekme) ── */
.FS-dil-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin: 14px 0 10px;
    border-bottom: 1px solid var(--fos-light-border);
    padding-bottom: 6px;
}
.FS-dil-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px; font-weight: 600;
    color: var(--fos-text-secondary);
    cursor: pointer;
    transition: background .15s var(--fos-ease), color .15s var(--fos-ease);
}
.FS-dil-tab:hover { background: var(--fos-orange-muted); color: var(--fos-orange); }
.FS-dil-tab.active {
    background: var(--fos-accent-grad);
    color: #fff;
    box-shadow: 0 2px 8px var(--fos-orange-glow);
}
.FS-tnt-textarea { min-height: 76px; resize: vertical; }

/* ── Form alt çubuğu ── */
.FS-tnt-form-alt {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--fos-light-border);
}

/* ── Yükleme limiti ipucu ── */
.FS-tnt-limit { color: var(--fos-info); font-weight: 600; }

/* ── Yükleme ilerleme çubuğu ── */
.FS-tnt-progress {
    position: relative;
    height: 8px; margin-top: 14px;
    background: var(--fos-light-bg);
    border-radius: 20px; overflow: hidden;
}
.FS-tnt-progress-bar {
    height: 100%; width: 30%;
    background: var(--fos-accent-grad);
    border-radius: 20px;
}
.FS-tnt-progress-aktif .FS-tnt-progress-bar { animation: FS-tnt-kayan 1.1s var(--fos-ease) infinite; }
@keyframes FS-tnt-kayan {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}
.FS-tnt-progress-metin {
    position: absolute; right: 0; top: -18px;
    font-size: 11px; color: var(--fos-text-muted);
}

/* ── İstatistik özet kutuları ── */
.FS-tnt-ozet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px; margin-bottom: 12px;
}
.FS-tnt-ozet-kutu {
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-left: 3px solid var(--fos-orange);
    border-radius: var(--fos-radius-lg);
    padding: 12px 14px;
    box-shadow: var(--fos-shadow-xs);
}
.FS-tnt-ozet-ust {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .4px; color: var(--fos-text-muted);
}
.FS-tnt-ozet-deger {
    font-size: 24px; font-weight: 700; color: var(--fos-text-primary); margin-top: 4px;
}

/* ════════ DARK MODE ════════ */
body.fos-dark .FS-tnt-kart,
body.fos-dark .FS-tnt-medya,
body.fos-dark .FS-tnt-ozet-kutu {
    background: var(--fos-dark-card);
    border-color: var(--fos-dark-border);
}
body.fos-dark .FS-tnt-ad,
body.fos-dark .FS-tnt-firma-ad,
body.fos-dark .FS-tnt-medya-baslik,
body.fos-dark .FS-tnt-ozet-deger { color: var(--fos-dark-text); }
body.fos-dark .FS-tnt-metin,
body.fos-dark .FS-tnt-firma-metin,
body.fos-dark .FS-tnt-medya-aciklama { color: var(--fos-dark-muted); }
body.fos-dark .FS-tnt-medya-meta,
body.fos-dark .FS-tnt-ozet-ust,
body.fos-dark .FS-tnt-ok,
body.fos-dark .FS-tnt-progress-metin { color: var(--fos-dark-muted); }
body.fos-dark .FS-tnt-logo-wrap,
body.fos-dark .FS-tnt-thumb,
body.fos-dark .FS-tnt-progress {
    background: var(--fos-dark-surface);
    border-color: var(--fos-dark-border);
}
body.fos-dark .FS-tnt-thumb i { color: var(--fos-dark-muted); }
body.fos-dark .FS-dil-tabs,
body.fos-dark .FS-tnt-form-alt { border-color: var(--fos-dark-border); }
body.fos-dark .FS-dil-tab { color: var(--fos-dark-muted); }
body.fos-dark .FS-dil-tab:hover { background: var(--fos-orange-muted); color: var(--fos-orange); }
body.fos-dark .FS-dil-tab.active { color: #fff; }

/* ════════ MOBILE ════════ */
@media (max-width: 768px) {
    .FS-tnt-grid { grid-template-columns: 1fr; gap: 10px; }
    .FS-tnt-kart { padding: 12px; gap: 10px; }
    .FS-tnt-logo-wrap { width: 48px; height: 48px; }
    .FS-tnt-logo-buyuk { width: 64px; height: 64px; }
    .FS-tnt-logo-harf { font-size: 20px; }
    .FS-tnt-logo-buyuk .FS-tnt-logo-harf { font-size: 26px; }

    /* Galeri: telefonda 2 sütun — kartlar çok küçülmesin */
    .FS-tnt-medya-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .FS-tnt-thumb { height: 96px; }
    .FS-tnt-thumb i { font-size: 28px; }
    .FS-tnt-medya-bilgi { padding: 8px 9px 10px; }
    .FS-tnt-medya-baslik { font-size: 12px; }
    .FS-tnt-medya-aciklama { display: none; }

    /* Firma kimliği alt alta */
    .FS-tnt-firma { flex-direction: column; align-items: center; text-align: center; }
    .FS-tnt-firma-metin { text-align: left; }

    /* Görüntüleyici tam ekran, kenar boşluğu küçülür */
    .FS-tnt-viewer-govde { padding: 6px; }
    .FS-tnt-viewer-bar { padding: 8px 10px; }
    .FS-tnt-viewer-baslik { font-size: 12px; }

    /* Dil sekmeleri taşarsa yatay kaydırılır */
    .FS-dil-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .FS-dil-tab { flex: 0 0 auto; padding: 5px 12px; }

    /* Form butonları tam genişlik */
    .FS-tnt-form-alt { flex-direction: column-reverse; }
    .FS-tnt-form-alt .fos-btn { width: 100%; justify-content: center; }

    .FS-tnt-ozet { grid-template-columns: 1fr 1fr; }
    .FS-tnt-ozet-deger { font-size: 20px; }
}

/* Çok dar ekran (küçük telefon) — galeri tek sütun */
@media (max-width: 420px) {
    .FS-tnt-medya-grid { grid-template-columns: 1fr; }
    .FS-tnt-thumb { height: 120px; }
}

/* ── Tanıtım: firma iletişim çipleri (tıklanabilir) ────────────── */
/* Telefon → tel:, e-posta → mailto:, web → yeni sekme, adres → harita */
.FS-tnt-iletisim {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}
.FS-tnt-il-chip {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%;
    padding: 5px 11px;
    font-size: 12px; font-weight: 500;
    color: var(--fos-text-secondary);
    background: var(--fos-light-bg);
    border: 1px solid var(--fos-light-border);
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .15s var(--fos-ease), color .15s var(--fos-ease), border-color .15s var(--fos-ease);
}
.FS-tnt-il-chip i { color: var(--fos-orange); font-size: 12px; flex: 0 0 auto; }
.FS-tnt-il-chip:hover {
    background: var(--fos-orange-muted);
    border-color: var(--fos-orange);
    color: var(--fos-orange);
}

/* Dark */
body.fos-dark .FS-tnt-il-chip {
    background: var(--fos-dark-surface);
    border-color: var(--fos-dark-border);
    color: var(--fos-dark-text);
}
body.fos-dark .FS-tnt-il-chip:hover {
    background: var(--fos-orange-muted);
    border-color: var(--fos-orange);
    color: var(--fos-orange);
}

/* Mobile — telefonda çipler tam satır, dokunma alanı büyür */
@media (max-width: 768px) {
    .FS-tnt-iletisim { justify-content: center; gap: 5px; }
    .FS-tnt-il-chip { padding: 7px 12px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   UÇUŞ BİLGİSİ MODÜLÜ — FS-ucs-*
   Giriş ekranı (satır bazlı alanlar) + analiz ekranı (uçuş grupları).
   KURAL 14: her kural light + dark + mobile ile birlikte yazılır.
   ════════════════════════════════════════════════════════════════ */

/* ── Özet kutuları ── */
.FS-ucs-ozet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.FS-ucs-ozet-kutu {
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-left: 3px solid var(--fos-orange);
    border-radius: var(--fos-radius-lg);
    padding: 10px 14px;
    box-shadow: var(--fos-shadow-xs);
}
/* Eksik sayısı kutusu — dikkat çeksin */
.FS-ucs-ozet-uyari { border-left-color: var(--fos-warning); }
.FS-ucs-ozet-ust {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .4px; color: var(--fos-text-muted);
}
.FS-ucs-ozet-deger {
    font-size: 22px; font-weight: 700; color: var(--fos-text-primary); margin-top: 2px;
}
.FS-ucs-ozet-uyari .FS-ucs-ozet-deger { color: var(--fos-warning); }

/* ── Satır içi uçuş alanları (tarih + saat + uçuş no) ── */
.FS-ucs-alanlar { display: flex; gap: 5px; align-items: center; }
.FS-ucs-alanlar .FS-ucs-tarih { max-width: 150px; }
.FS-ucs-alanlar .FS-ucs-saat  { max-width: 105px; }
.FS-ucs-alanlar .FS-ucs-no    { max-width: 110px; text-transform: uppercase; }

/* Kaydedilen satır — kullanıcı neyi kaydettiğini görsün */
.FS-ucs-tablo tr.FS-ucs-kayitli td { background: rgba(5, 150, 105, .07); }

/* ── Analiz: yön sekmeleri ── */
.FS-ucs-yon-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.FS-ucs-yon-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 16px;
    font-size: 13px; font-weight: 600;
    color: var(--fos-text-secondary);
    background: var(--fos-light-bg);
    border: 1px solid var(--fos-light-border);
    border-radius: 20px;
    text-decoration: none;
    transition: background .15s var(--fos-ease), color .15s var(--fos-ease);
}
.FS-ucs-yon-tab:hover { background: var(--fos-orange-muted); color: var(--fos-orange); }
.FS-ucs-yon-tab.active {
    background: var(--fos-accent-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px var(--fos-orange-glow);
}

/* ── Analiz: saat rozeti ── */
.FS-ucs-saat-rozet {
    display: inline-block;
    font-family: var(--fos-font-mono);
    font-size: 13px; font-weight: 700;
    color: var(--fos-orange);
    background: var(--fos-orange-muted);
    padding: 2px 9px; border-radius: 6px;
}

/* ── Analiz: uzun metin hücreleri ── */
.FS-ucs-firma-hucre { max-width: 260px; font-size: 12px; }
.FS-ucs-kisi-hucre {
    max-width: 320px; font-size: 12px; color: var(--fos-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ════════ DARK MODE ════════ */
body.fos-dark .FS-ucs-ozet-kutu {
    background: var(--fos-dark-card);
    border-color: var(--fos-dark-border);
    border-left-color: var(--fos-orange);
}
body.fos-dark .FS-ucs-ozet-uyari { border-left-color: var(--fos-warning); }
body.fos-dark .FS-ucs-ozet-ust { color: var(--fos-dark-muted); }
body.fos-dark .FS-ucs-ozet-deger { color: var(--fos-dark-text); }
body.fos-dark .FS-ucs-yon-tab {
    background: var(--fos-dark-surface);
    border-color: var(--fos-dark-border);
    color: var(--fos-dark-muted);
}
body.fos-dark .FS-ucs-yon-tab:hover { background: var(--fos-orange-muted); color: var(--fos-orange); }
body.fos-dark .FS-ucs-yon-tab.active { color: #fff; }
body.fos-dark .FS-ucs-kisi-hucre { color: var(--fos-dark-muted); }
body.fos-dark .FS-ucs-tablo tr.FS-ucs-kayitli td { background: rgba(5, 150, 105, .14); }

/* ════════ MOBILE ════════ */
@media (max-width: 768px) {
    .FS-ucs-ozet { grid-template-columns: 1fr 1fr; gap: 8px; }
    .FS-ucs-ozet-deger { font-size: 18px; }

    /* Telefonda tarih/saat/uçuş no alt alta — yan yana sığmıyor */
    .FS-ucs-alanlar { flex-direction: column; align-items: stretch; gap: 4px; }
    .FS-ucs-alanlar .FS-ucs-tarih,
    .FS-ucs-alanlar .FS-ucs-saat,
    .FS-ucs-alanlar .FS-ucs-no { max-width: none; width: 100%; }

    .FS-ucs-yon-tab { flex: 1 1 auto; justify-content: center; padding: 8px 12px; }
    .FS-ucs-firma-hucre, .FS-ucs-kisi-hucre { max-width: 180px; }
}

/* ── Uçuş bilgisi: portal blok başlığı ──────────────────────── */
/* Portal personel ekleme formunda ve modalda uçuş bölümünü ayırır */
.FS-ucs-portal-blok {
    border: 1px solid var(--fos-light-border);
    border-left: 3px solid var(--fos-orange);
    border-radius: var(--fos-radius);
    background: var(--fos-light-bg);
    padding: 10px 12px;
}
.FS-ucs-portal-baslik {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .3px; color: var(--fos-orange);
    margin-bottom: 8px;
}

/* Dark */
body.fos-dark .FS-ucs-portal-blok {
    background: var(--fos-dark-surface);
    border-color: var(--fos-dark-border);
    border-left-color: var(--fos-orange);
}

/* Mobile — dar ekranda iç boşluk küçülür */
@media (max-width: 768px) {
    .FS-ucs-portal-blok { padding: 8px 10px; }
    .FS-ucs-portal-baslik { font-size: 11px; }
}

/* ── Davet ekranı: kişi satırındaki uçuş butonu ─────────────── */
/* Yeşil: geliş + dönüş tam — Turuncu: eksik (tıklayınca uçuş paneli açılır) */
.dvt-acc-ucus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: 0 0 auto;
    border-radius: 6px; border: 1px solid transparent;
    font-size: 11px; cursor: pointer; padding: 0;
    transition: transform .15s var(--fos-ease), box-shadow .15s var(--fos-ease);
}
.dvt-acc-ucus:hover { transform: translateY(-1px); box-shadow: var(--fos-shadow-xs); }
.dvt-acc-ucus-ok    { background: #dcfce7; border-color: #86efac; color: #15803d; }
.dvt-acc-ucus-eksik { background: #ffedd5; border-color: #fdba74; color: #c2410c; }

/* Dark */
body.fos-dark .dvt-acc-ucus-ok    { background: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.35);  color: #4ade80; }
body.fos-dark .dvt-acc-ucus-eksik { background: rgba(249,115,22,.15); border-color: rgba(249,115,22,.35); color: #fb923c; }

/* Mobile — dokunma alanı büyür */
@media (max-width: 768px) {
    .dvt-acc-ucus { width: 30px; height: 30px; font-size: 13px; }
}

/* ── Portal Oda Dağılımı: kişi chip'indeki uçuş butonu ───────── */
/* Yeşil: geliş + dönüş tam — Turuncu: eksik. Tıklayınca uçuş modalı (düzenleme) açılır */
.dod-kisi-chip-ucus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: 0 0 auto;
    margin-left: 4px; padding: 0;
    border-radius: 5px; border: 1px solid transparent;
    font-size: 10px; cursor: pointer;
}
.dod-kisi-chip-ucus.dod-ucs-ok    { background: #dcfce7; border-color: #86efac; color: #15803d; }
.dod-kisi-chip-ucus.dod-ucs-eksik { background: #ffedd5; border-color: #fdba74; color: #c2410c; }

/* Dark */
body.fos-dark .dod-kisi-chip-ucus.dod-ucs-ok    { background: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.35);  color: #4ade80; }
body.fos-dark .dod-kisi-chip-ucus.dod-ucs-eksik { background: rgba(249,115,22,.15); border-color: rgba(249,115,22,.35); color: #fb923c; }

/* Mobile — parmakla dokunulabilir boyut */
@media (max-width: 768px) {
    .dod-kisi-chip-ucus { width: 28px; height: 28px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   UÇUŞ ANALİZİ PİVOT — FS-ucp-*
   Gün kartı → saat çizelgesi → dilim satırı (araç önerisi) → uçuşlar → kişiler
   KURAL 14: light + dark + mobile birlikte.
   ════════════════════════════════════════════════════════════════ */

/* ── Kontrol çubuğu ── */
.FS-ucp-kontrol { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.FS-ucp-gruplama { min-width: 200px; }

/* ── Özet kutusu alt satırı (araç dağılımı / en yoğun dilim) ── */
.FS-ucp-ozet-alt { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 11px; color: var(--fos-text-secondary); }
.FS-ucp-ozet-alt i { color: var(--fos-orange); }

/* ── Filo açıklaması ── */
.FS-ucp-filo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--fos-text-muted); }
.FS-ucp-filo-baslik { font-weight: 600; margin-right: 2px; }
.FS-ucp-filo-cip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    background: var(--fos-light-bg); border: 1px solid var(--fos-light-border);
    color: var(--fos-text-secondary);
}
.FS-ucp-filo-cip i { color: var(--fos-orange); }
.FS-ucp-filo-cip b { color: var(--fos-text-primary); }

/* ── Gün kartı ── */
.FS-ucp-gun {
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-left: 3px solid var(--fos-orange);
    border-radius: var(--fos-radius-lg);
    box-shadow: var(--fos-shadow-xs);
    margin-bottom: 14px; overflow: hidden;
}
.FS-ucp-gun-bas {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px;
    background: linear-gradient(90deg, var(--fos-orange-muted), transparent 70%);
    border-bottom: 1px solid var(--fos-light-border);
}
.FS-ucp-gun-tarih { font-size: 15px; font-weight: 700; color: var(--fos-text-primary); }
.FS-ucp-gun-tarih i { color: var(--fos-orange); margin-right: 4px; }
.FS-ucp-gun-ozet { display: flex; gap: 14px; font-size: 12px; color: var(--fos-text-secondary); }
.FS-ucp-gun-ozet b { font-size: 16px; color: var(--fos-text-primary); margin-right: 2px; }

/* ── Saat çizelgesi (yoğunluk barları) ── */
.FS-ucp-zaman {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 14px 16px 8px; overflow-x: auto;
    border-bottom: 1px dashed var(--fos-light-border);
}
.FS-ucp-zaman-sutun { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 44px; }
.FS-ucp-zaman-sayi { font-size: 11px; font-weight: 700; color: var(--fos-text-primary); }
.FS-ucp-zaman-bar {
    width: 22px; height: 70px;
    display: flex; align-items: flex-end;
    background: var(--fos-light-bg); border-radius: 6px; overflow: hidden;
}
.FS-ucp-zaman-bar > div { width: 100%; background: var(--fos-accent-grad); border-radius: 6px 6px 0 0; transition: height .35s var(--fos-ease); }
.FS-ucp-zaman-et { font-size: 10px; font-family: var(--fos-font-mono); color: var(--fos-text-muted); }

/* ── Dilim satırı ── */
.FS-ucp-dilimler { padding: 6px 10px 10px; }
.FS-ucp-dilim { border-radius: var(--fos-radius); margin-top: 4px; }
.FS-ucp-dilim + .FS-ucp-dilim { border-top: 1px solid var(--fos-light-border); }
.FS-ucp-dilim-bas {
    display: grid;
    grid-template-columns: 120px minmax(140px, 1fr) 90px minmax(160px, 1.2fr) auto 18px;
    align-items: center; gap: 12px;
    padding: 10px 8px; cursor: pointer; border-radius: var(--fos-radius);
    transition: background .15s var(--fos-ease);
}
.FS-ucp-dilim-bas:hover { background: var(--fos-orange-muted); }
.FS-ucp-saat { font-family: var(--fos-font-mono); font-size: 14px; font-weight: 700; color: var(--fos-orange); }
/* Kişi yük barı */
.FS-ucp-yuk { position: relative; height: 26px; background: var(--fos-light-bg); border-radius: 8px; overflow: hidden; }
.FS-ucp-yuk-dolgu { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fos-accent-grad); opacity: .28; border-radius: 8px; }
.FS-ucp-yuk-metin { position: relative; line-height: 26px; padding-left: 10px; font-size: 12px; color: var(--fos-text-secondary); }
.FS-ucp-yuk-metin b { font-size: 15px; color: var(--fos-text-primary); }
.FS-ucp-ucus-sayi { font-size: 12px; color: var(--fos-text-secondary); white-space: nowrap; }
/* Araç çipleri */
.FS-ucp-araclar { display: flex; flex-wrap: wrap; gap: 5px; }
.FS-ucp-arac {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
    background: var(--fos-info-bg); color: var(--fos-info);
    border: 1px solid rgba(37, 99, 235, .18);
}
.FS-ucp-arac b { font-weight: 800; }
.FS-ucp-transfer { white-space: nowrap; }
.FS-ucp-chev { color: var(--fos-text-muted); transition: transform .2s var(--fos-ease); }
.acik > [data-ucp-ac] > .FS-ucp-chev { transform: rotate(180deg); }

/* ── Uçuşlar (dilim açılınca) ── */
.FS-ucp-ucuslar { display: none; padding: 2px 8px 10px 28px; }
.FS-ucp-dilim.acik > .FS-ucp-ucuslar { display: block; }
.FS-ucp-ucus { border-left: 2px solid var(--fos-light-border); margin-left: 4px; }
.FS-ucp-ucus-bas {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 10px; cursor: pointer; border-radius: 0 var(--fos-radius) var(--fos-radius) 0;
}
.FS-ucp-ucus-bas:hover { background: var(--fos-light-bg); }
.FS-ucp-ucus-no { font-weight: 700; font-size: 13px; color: var(--fos-text-primary); }
.FS-ucp-ucus-no i { color: var(--fos-orange); font-size: 11px; }
.FS-ucp-hava { font-size: 11px; color: var(--fos-text-muted); }
.FS-ucp-firmalar { font-size: 12px; color: var(--fos-text-secondary); flex: 1 1 160px; }
.FS-ucp-ucus-bas .FS-ucp-chev { margin-left: auto; }

/* ── Kişiler (uçuş açılınca) ── */
.FS-ucp-kisiler { display: none; padding: 4px 10px 8px 22px; }
.FS-ucp-ucus.acik > .FS-ucp-kisiler { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 14px; }
.FS-ucp-kisi { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 0; min-width: 0; }
.FS-ucp-kisi > i { color: var(--fos-text-muted); }
.FS-ucp-kisi-ad { font-weight: 600; color: var(--fos-text-primary); white-space: nowrap; }
.FS-ucp-kisi-firma { color: var(--fos-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.FS-ucp-kisi-tel { margin-left: auto; color: var(--fos-orange); white-space: nowrap; text-decoration: none; }

/* ════════ DARK ════════ */
body.fos-dark .FS-ucp-gun { background: var(--fos-dark-card); border-color: var(--fos-dark-border); border-left-color: var(--fos-orange); }
body.fos-dark .FS-ucp-gun-bas { border-bottom-color: var(--fos-dark-border); }
body.fos-dark .FS-ucp-gun-tarih,
body.fos-dark .FS-ucp-gun-ozet b,
body.fos-dark .FS-ucp-zaman-sayi,
body.fos-dark .FS-ucp-yuk-metin b,
body.fos-dark .FS-ucp-ucus-no,
body.fos-dark .FS-ucp-kisi-ad,
body.fos-dark .FS-ucp-filo-cip b { color: var(--fos-dark-text); }
body.fos-dark .FS-ucp-gun-ozet,
body.fos-dark .FS-ucp-yuk-metin,
body.fos-dark .FS-ucp-ucus-sayi,
body.fos-dark .FS-ucp-firmalar,
body.fos-dark .FS-ucp-ozet-alt,
body.fos-dark .FS-ucp-filo,
body.fos-dark .FS-ucp-filo-cip,
body.fos-dark .FS-ucp-kisi-firma,
body.fos-dark .FS-ucp-zaman-et,
body.fos-dark .FS-ucp-hava { color: var(--fos-dark-muted); }
body.fos-dark .FS-ucp-zaman { border-bottom-color: var(--fos-dark-border); }
body.fos-dark .FS-ucp-zaman-bar,
body.fos-dark .FS-ucp-yuk,
body.fos-dark .FS-ucp-filo-cip { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); }
body.fos-dark .FS-ucp-dilim + .FS-ucp-dilim { border-top-color: var(--fos-dark-border); }
body.fos-dark .FS-ucp-ucus { border-left-color: var(--fos-dark-border); }
body.fos-dark .FS-ucp-ucus-bas:hover { background: var(--fos-dark-surface); }
body.fos-dark .FS-ucp-arac { background: rgba(37, 99, 235, .16); color: #93c5fd; border-color: rgba(147, 197, 253, .25); }

/* ════════ MOBILE ════════ */
@media (max-width: 992px) {
    /* Tablet: araç ve buton alt satıra iner */
    .FS-ucp-dilim-bas { grid-template-columns: 100px 1fr 80px 18px; }
    .FS-ucp-araclar { grid-column: 1 / 4; }
    .FS-ucp-transfer { grid-column: 1 / 4; justify-self: start; }
    .FS-ucp-dilim-bas > .FS-ucp-chev { grid-column: 4; grid-row: 1; }
}
@media (max-width: 768px) {
    .FS-ucp-kontrol { flex-direction: column; align-items: stretch; }
    .FS-ucp-gruplama { min-width: 0; }
    .FS-ucp-gun-bas { padding: 10px 12px; }
    .FS-ucp-gun-ozet { gap: 10px; }
    .FS-ucp-zaman { padding: 10px 12px 6px; gap: 6px; }
    .FS-ucp-zaman-sutun { min-width: 36px; }
    .FS-ucp-zaman-bar { height: 52px; width: 18px; }
    .FS-ucp-dilimler { padding: 4px 6px 8px; }
    .FS-ucp-dilim-bas { grid-template-columns: 1fr auto; gap: 8px; padding: 10px 6px; }
    .FS-ucp-saat { grid-column: 1; }
    .FS-ucp-dilim-bas > .FS-ucp-chev { grid-column: 2; grid-row: 1; }
    .FS-ucp-yuk, .FS-ucp-ucus-sayi, .FS-ucp-araclar, .FS-ucp-transfer { grid-column: 1 / 3; }
    .FS-ucp-transfer { justify-self: stretch; justify-content: center; }
    .FS-ucp-ucuslar { padding: 2px 2px 8px 8px; }
    .FS-ucp-ucus.acik > .FS-ucp-kisiler { grid-template-columns: 1fr; padding-left: 12px; }
    .FS-ucp-kisi { flex-wrap: wrap; }
    .FS-ucp-kisi-tel { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════
   RANDEVU MODÜLÜ — FS-rnd-*    +    KVKK ONAY — FS-kvkk-*
   KURAL 14: light + dark + mobile birlikte.
   ════════════════════════════════════════════════════════════════ */

/* ── Adım başlığı ── */
.FS-rnd-adim {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--fos-text-secondary); margin-bottom: 8px;
}
.FS-rnd-adim-no {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--fos-accent-grad); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}

/* ── Gün / süre çipleri ── */
.FS-rnd-chipler { display: flex; flex-wrap: wrap; gap: 6px; }
.FS-rnd-chip {
    border: 1px solid var(--fos-light-border); background: var(--fos-light-surface);
    color: var(--fos-text-secondary); border-radius: 20px;
    padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .15s var(--fos-ease), color .15s var(--fos-ease), border-color .15s var(--fos-ease);
}
.FS-rnd-chip:hover { border-color: var(--fos-orange); color: var(--fos-orange); }
.FS-rnd-chip.active {
    background: var(--fos-accent-grad); border-color: transparent; color: #fff;
    box-shadow: 0 2px 8px var(--fos-orange-glow);
}

/* ── Saat ızgarası ── */
.FS-rnd-izgara { display: flex; flex-direction: column; gap: 5px; transition: opacity .15s var(--fos-ease); }
.FS-rnd-yukleniyor { opacity: .45; pointer-events: none; }
.FS-rnd-saat-satir { display: grid; grid-template-columns: 52px repeat(4, 1fr); gap: 5px; align-items: center; }
.FS-rnd-saat-et { font-family: var(--fos-font-mono); font-size: 11px; color: var(--fos-text-muted); }
.FS-rnd-slot {
    border: 1px solid var(--fos-light-border); background: var(--fos-light-surface);
    color: var(--fos-text-primary); border-radius: 8px; padding: 7px 0;
    font-family: var(--fos-font-mono); font-size: 12px; cursor: pointer;
    transition: background .12s var(--fos-ease), border-color .12s var(--fos-ease), transform .12s var(--fos-ease);
}
.FS-rnd-slot:hover:not(:disabled) { border-color: var(--fos-orange); background: var(--fos-orange-muted); transform: translateY(-1px); }
.FS-rnd-slot.secili {
    background: var(--fos-accent-grad); color: #fff; border-color: transparent; font-weight: 700;
    box-shadow: 0 2px 8px var(--fos-orange-glow);
}
/* Karşı taraf dolu — çizgili kırmızı */
.FS-rnd-slot.dolu {
    background: repeating-linear-gradient(45deg, #fef2f2, #fef2f2 6px, #fee2e2 6px, #fee2e2 12px);
    color: var(--fos-danger); border-color: #fecaca; cursor: not-allowed; text-decoration: line-through;
}
/* Benim takvimim dolu — mavi */
.FS-rnd-slot.benim { background: var(--fos-info-bg); color: var(--fos-info); border-color: rgba(37, 99, 235, .25); cursor: not-allowed; }
/* Mesai sonunu aşan slot */
.FS-rnd-slot:disabled:not(.dolu):not(.benim) { opacity: .35; cursor: not-allowed; }

/* ── Lejant ── */
.FS-rnd-lejant { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--fos-text-muted); margin-top: 10px; }
.FS-rnd-lejant i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; border: 1px solid var(--fos-light-border); }
.FS-rnd-lejant .l-bos    { background: var(--fos-light-surface); }
.FS-rnd-lejant .l-secili { background: var(--fos-accent-grad); border-color: transparent; }
.FS-rnd-lejant .l-dolu   { background: repeating-linear-gradient(45deg, #fef2f2, #fef2f2 3px, #fee2e2 3px, #fee2e2 6px); border-color: #fecaca; }
.FS-rnd-lejant .l-benim  { background: var(--fos-info-bg); border-color: rgba(37, 99, 235, .25); }

/* ── Seçim özeti ── */
.FS-rnd-secim {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: var(--fos-radius-lg);
    background: var(--fos-orange-muted); border: 1px dashed var(--fos-orange);
    font-size: 13px; color: var(--fos-text-primary);
}
.FS-rnd-secim i, .FS-rnd-secim b { color: var(--fos-orange); }

/* ── Detay: zaman kutusu + taraflar ── */
.FS-rnd-zaman { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.FS-rnd-zaman-kutu {
    background: var(--fos-accent-grad); color: #fff;
    border-radius: var(--fos-radius-lg); padding: 10px 18px; text-align: center; min-width: 130px;
    box-shadow: var(--fos-shadow-orange);
}
.FS-rnd-zaman-gun  { font-size: 12px; opacity: .92; }
.FS-rnd-zaman-saat { font-size: 28px; font-weight: 800; font-family: var(--fos-font-mono); line-height: 1.1; }
.FS-rnd-zaman-sure { font-size: 11px; opacity: .92; }
.FS-rnd-kisiler { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; flex: 1 1 380px; }
.FS-rnd-kisi { background: var(--fos-light-bg); border: 1px solid var(--fos-light-border); border-radius: var(--fos-radius-lg); padding: 10px 12px; min-width: 0; }
.FS-rnd-kisi-et    { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--fos-text-muted); }
.FS-rnd-kisi-ad    { font-size: 14px; font-weight: 700; color: var(--fos-text-primary); }
.FS-rnd-kisi-firma { font-size: 12px; color: var(--fos-text-secondary); }
.FS-rnd-ok { color: var(--fos-orange); font-size: 22px; }

/* ── Detay: alanlar ── */
.FS-rnd-alan-et { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--fos-text-muted); margin: 14px 0 4px; }
.FS-rnd-not {
    background: var(--fos-light-bg); border-left: 3px solid var(--fos-orange);
    border-radius: var(--fos-radius); padding: 10px 12px;
    font-size: 13px; white-space: pre-line; color: var(--fos-text-primary);
}
.FS-rnd-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 11px; color: var(--fos-text-muted); }

/* ── Detay: işlem panelleri ── */
.FS-rnd-islemler { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.FS-rnd-islem { display: block; border: 1px solid var(--fos-light-border); border-radius: var(--fos-radius-lg); padding: 12px 14px; }
.FS-rnd-islem-onay  { border-color: #bbf7d0; background: #f0fdf4; }
.FS-rnd-islem-red   { border-color: #fecaca; background: #fef2f2; }
.FS-rnd-islem-kapat { border-color: rgba(37, 99, 235, .25); background: var(--fos-info-bg); }
.FS-rnd-islem-baslik { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.FS-rnd-islem-onay  .FS-rnd-islem-baslik { color: #15803d; }
.FS-rnd-islem-red   .FS-rnd-islem-baslik { color: #b91c1c; }
.FS-rnd-islem-kapat .FS-rnd-islem-baslik { color: var(--fos-info); }
.FS-rnd-sonuclar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.FS-rnd-sonuc {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 20px; border: 1px solid var(--fos-light-border);
    background: var(--fos-light-surface); font-size: 12px; font-weight: 600; cursor: pointer;
}
.FS-rnd-sonuc input { accent-color: var(--fos-orange); }

/* ── Liste: onayımı bekleyen zil ikonu ── */
.FS-rnd-bildirim { color: var(--fos-orange); margin-right: 5px; }

/* ── KVKK ── */
.FS-kvkk-metin {
    max-height: 50vh; overflow-y: auto; white-space: pre-line;
    font-size: 13px; line-height: 1.6; padding: 14px 16px;
    background: var(--fos-light-bg); border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg); color: var(--fos-text-primary);
}
.FS-kvkk-onay { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; font-size: 13px; cursor: pointer; color: var(--fos-text-primary); }
.FS-kvkk-onay input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--fos-orange); flex: 0 0 auto; }

/* ════════ DARK ════════ */
body.fos-dark .FS-rnd-chip,
body.fos-dark .FS-rnd-slot,
body.fos-dark .FS-rnd-sonuc { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); color: var(--fos-dark-text); }
body.fos-dark .FS-rnd-chip.active,
body.fos-dark .FS-rnd-slot.secili { color: #fff; border-color: transparent; }
body.fos-dark .FS-rnd-slot.dolu {
    background: repeating-linear-gradient(45deg, rgba(220,38,38,.12), rgba(220,38,38,.12) 6px, rgba(220,38,38,.22) 6px, rgba(220,38,38,.22) 12px);
    color: #fca5a5; border-color: rgba(252,165,165,.3);
}
body.fos-dark .FS-rnd-slot.benim { background: rgba(37,99,235,.16); color: #93c5fd; border-color: rgba(147,197,253,.3); }
body.fos-dark .FS-rnd-adim,
body.fos-dark .FS-rnd-kisi-firma { color: var(--fos-dark-muted); }
body.fos-dark .FS-rnd-saat-et,
body.fos-dark .FS-rnd-lejant,
body.fos-dark .FS-rnd-kisi-et,
body.fos-dark .FS-rnd-alan-et,
body.fos-dark .FS-rnd-meta { color: var(--fos-dark-muted); }
body.fos-dark .FS-rnd-kisi,
body.fos-dark .FS-rnd-not,
body.fos-dark .FS-kvkk-metin { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); color: var(--fos-dark-text); }
body.fos-dark .FS-rnd-not { border-left-color: var(--fos-orange); }
body.fos-dark .FS-rnd-kisi-ad,
body.fos-dark .FS-rnd-secim,
body.fos-dark .FS-kvkk-onay { color: var(--fos-dark-text); }
body.fos-dark .FS-rnd-islem { border-color: var(--fos-dark-border); }
body.fos-dark .FS-rnd-islem-onay  { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.3); }
body.fos-dark .FS-rnd-islem-red   { background: rgba(220,38,38,.08);  border-color: rgba(220,38,38,.3); }
body.fos-dark .FS-rnd-islem-kapat { background: rgba(37,99,235,.10);  border-color: rgba(147,197,253,.3); }
body.fos-dark .FS-rnd-islem-onay  .FS-rnd-islem-baslik { color: #4ade80; }
body.fos-dark .FS-rnd-islem-red   .FS-rnd-islem-baslik { color: #fca5a5; }
body.fos-dark .FS-rnd-islem-kapat .FS-rnd-islem-baslik { color: #93c5fd; }

/* ════════ MOBILE ════════ */
@media (max-width: 768px) {
    /* Izgara: saat etiketi dar, slotlar parmakla basılabilir */
    .FS-rnd-saat-satir { grid-template-columns: 40px repeat(4, 1fr); gap: 4px; }
    .FS-rnd-slot { padding: 10px 0; font-size: 11px; }
    .FS-rnd-chip { padding: 8px 12px; }

    /* Detay: taraflar alt alta, ok aşağı döner */
    .FS-rnd-zaman { flex-direction: column; align-items: stretch; }
    .FS-rnd-zaman-kutu { min-width: 0; }
    .FS-rnd-kisiler { grid-template-columns: 1fr; flex-basis: auto; }
    .FS-rnd-ok { justify-self: center; transform: rotate(90deg); }
    .FS-rnd-islemler { grid-template-columns: 1fr; }
    .FS-rnd-islem .fos-btn { width: 100%; justify-content: center; }

    .FS-kvkk-metin { max-height: 45vh; padding: 12px; font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════
   RANDEVU — KİŞİ SEÇİCİ (firma kartı → personel, arama) + MÜŞTERİ KART LİSTESİ
   KURAL 14: light + dark + mobile birlikte. Telefon öncelikli: dokunma alanları ≥ 44px.
   ════════════════════════════════════════════════════════════════ */

/* ── Arama kutusu ── */
.FS-rnd-ara { position: relative; margin-bottom: 10px; }
.FS-rnd-ara > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fos-text-muted); pointer-events: none; }
.FS-rnd-ara .fos-input { padding-left: 36px; min-height: 42px; }

/* ── Seçici üst satırı: geri çipi + firma adı ── */
.FS-rnd-secici-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.FS-rnd-secici-ust:not(:empty) { margin-bottom: 8px; }
.FS-rnd-geri {
    border: 1px solid var(--fos-light-border); background: var(--fos-light-surface); color: var(--fos-text-secondary);
    border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.FS-rnd-geri:hover { border-color: var(--fos-orange); color: var(--fos-orange); }
.FS-rnd-secici-firma { font-size: 13px; font-weight: 700; color: var(--fos-text-primary); }

/* ── Liste kabı — uzun listede kart içinde kayar ── */
.FS-rnd-liste { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.FS-rnd-bos { padding: 14px; text-align: center; color: var(--fos-text-muted); font-size: 13px; }

/* ── Firma kartı ── */
.FS-rnd-firma {
    display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;
    width: 100%; text-align: left; padding: 8px 12px; cursor: pointer;
    border: 1px solid var(--fos-light-border); border-radius: var(--fos-radius-lg); background: var(--fos-light-surface);
    transition: border-color .15s var(--fos-ease), transform .15s var(--fos-ease);
}
.FS-rnd-firma:hover { border-color: var(--fos-orange); transform: translateY(-1px); }
.FS-rnd-firma-logo {
    width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fos-orange-muted); color: var(--fos-orange); font-weight: 800; font-size: 15px;
}
.FS-rnd-firma-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.FS-rnd-firma-ad { font-size: 14px; font-weight: 700; color: var(--fos-text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.FS-rnd-firma-sayi { font-size: 11px; font-weight: 600; color: var(--fos-text-muted); white-space: nowrap; }

/* ── Personel satırı ── */
.FS-rnd-kisi-btn {
    display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px;
    width: 100%; text-align: left; padding: 7px 12px; cursor: pointer; min-height: 52px;
    border: 1px solid var(--fos-light-border); border-radius: var(--fos-radius-lg); background: var(--fos-light-surface);
    color: var(--fos-text-muted);
    transition: border-color .15s var(--fos-ease), background .15s var(--fos-ease);
}
.FS-rnd-kisi-btn:hover { border-color: var(--fos-orange); background: var(--fos-orange-muted); }
.FS-rnd-kisi-bilgi { display: flex; flex-direction: column; min-width: 0; }
.FS-rnd-kisi-bilgi .FS-rnd-kisi-ad,
.FS-rnd-kisi-bilgi .FS-rnd-kisi-firma { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.FS-rnd-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fos-accent-grad); color: #fff; font-weight: 700; font-size: 13px;
}

/* ── Seçilen kişi kartı ── */
.FS-rnd-secili {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--fos-orange); border-radius: var(--fos-radius-lg); background: var(--fos-orange-muted);
}
.FS-rnd-secili-bilgi { flex: 1 1 auto; min-width: 0; }

/* ── Müşteri ekranı: büyük talep butonu + kart listesi ── */
.FS-rnd-talep-btn { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; max-width: 420px; padding: 12px 18px; font-size: 15px; }
.FS-rnd-kartlar { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.FS-rnd-kart {
    display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px;
    padding: 10px 12px; text-decoration: none; color: inherit;
    border: 1px solid var(--fos-light-border); border-radius: var(--fos-radius-lg); background: var(--fos-light-surface);
    box-shadow: var(--fos-shadow-xs);
    transition: border-color .15s var(--fos-ease), transform .15s var(--fos-ease);
}
.FS-rnd-kart:hover { border-color: var(--fos-orange); transform: translateY(-1px); color: inherit; }
.FS-rnd-kart-zaman { background: var(--fos-accent-grad); color: #fff; border-radius: 10px; text-align: center; padding: 6px 4px; }
.FS-rnd-kart-gun  { font-size: 11px; opacity: .92; }
.FS-rnd-kart-saat { font-size: 17px; font-weight: 800; font-family: var(--fos-font-mono); line-height: 1.1; }
.FS-rnd-kart-bilgi { min-width: 0; }
.FS-rnd-kart-alt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.FS-rnd-kart-yer { font-size: 11px; color: var(--fos-text-muted); }
.FS-rnd-kart-ok { color: var(--fos-text-muted); }

/* ════════ DARK ════════ */
body.fos-dark .FS-rnd-geri,
body.fos-dark .FS-rnd-firma,
body.fos-dark .FS-rnd-kisi-btn,
body.fos-dark .FS-rnd-kart { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); color: var(--fos-dark-text); }
body.fos-dark .FS-rnd-firma:hover,
body.fos-dark .FS-rnd-kisi-btn:hover,
body.fos-dark .FS-rnd-kart:hover { border-color: var(--fos-orange); }
body.fos-dark .FS-rnd-kisi-btn:hover { background: rgba(249,115,22,.10); }
body.fos-dark .FS-rnd-firma-ad,
body.fos-dark .FS-rnd-secici-firma { color: var(--fos-dark-text); }
body.fos-dark .FS-rnd-firma-sayi,
body.fos-dark .FS-rnd-bos,
body.fos-dark .FS-rnd-kart-yer,
body.fos-dark .FS-rnd-kart-ok,
body.fos-dark .FS-rnd-ara > i { color: var(--fos-dark-muted); }
body.fos-dark .FS-rnd-firma-logo { background: rgba(249,115,22,.14); }
body.fos-dark .FS-rnd-secili { background: rgba(249,115,22,.10); }

/* ════════ MOBILE ════════ */
@media (max-width: 768px) {
    /* Telefonda liste sayfayla birlikte kaysın — iç içe scroll parmakta zor */
    .FS-rnd-liste { max-height: none; overflow: visible; }
    .FS-rnd-firma { padding: 10px 12px; }
    .FS-rnd-kisi-btn { min-height: 56px; }
    .FS-rnd-secili { flex-wrap: wrap; }
    .FS-rnd-secili .fos-btn { width: 100%; justify-content: center; }
    .FS-rnd-talep-btn { max-width: none; }
    .FS-rnd-kart { grid-template-columns: 56px 1fr auto; gap: 10px; }
    .FS-rnd-gonder { width: 100%; justify-content: center; padding: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   PORTAL ÖNEMLİ HATIRLATMALAR + ELLE İMZA — FS-hatirlatma-*, FS-onay-modal, FS-imza-*
   KURAL 14: light + dark + mobile birlikte. İmza zemini her temada beyaz (kâğıt).
   ════════════════════════════════════════════════════════════════ */

/* ── Hatırlatma kutusu (sayfa üstü — details ile kapatılabilir) ── */
.FS-hatirlatma {
    border: 1px solid #fcd34d; border-left: 4px solid var(--fos-warning);
    background: var(--fos-warning-bg); border-radius: var(--fos-radius-lg); padding: 10px 14px;
}
.FS-hatirlatma-baslik {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: #b45309;
}
.FS-hatirlatma > summary { list-style: none; }
.FS-hatirlatma > summary::-webkit-details-marker { display: none; }
.FS-hatirlatma-metin { white-space: pre-line; font-size: 13px; line-height: 1.6; color: var(--fos-text-primary); margin-top: 6px; }
/* Modal içinde uzun metin kendi içinde kayar */
.FS-hatirlatma-kutu {
    max-height: 32vh; overflow-y: auto; padding: 10px 12px; margin-bottom: 4px;
    background: var(--fos-warning-bg); border: 1px solid #fcd34d; border-radius: var(--fos-radius);
}

/* ── Onay modalı — hatırlatma + imza sığsın ── */
.FS-onay-modal { max-width: 560px; max-height: 92vh; overflow-y: auto; }

/* ── İmza alanı ── */
.FS-imza-alan-ust { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 5px; }
.FS-imza-alan {
    position: relative; height: 190px; border: 2px dashed var(--fos-light-border);
    border-radius: var(--fos-radius-lg); background: #fff; overflow: hidden;
    touch-action: none;   /* parmakla çizerken sayfa kaymasın */
}
.FS-imza-alan canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.FS-imza-ipucu {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
    color: #94a3b8; font-size: 13px; pointer-events: none;
}

/* ── Davet ekranı: imza listesi ── */
.FS-imza-satir { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--fos-light-border); }
.FS-imza-satir:last-child { border-bottom: 0; }
.FS-imza-onizleme { display: block; border: 1px solid var(--fos-light-border); border-radius: var(--fos-radius); background: #fff; overflow: hidden; }
.FS-imza-onizleme img { display: block; width: 100%; height: 60px; object-fit: contain; }
.FS-imza-bilgi { min-width: 0; font-size: 12.5px; }
.FS-imza-detay { margin-top: 4px; }
.FS-imza-detay > summary { cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--fos-orange); }
.FS-imza-metin { white-space: pre-line; font-size: 11.5px; color: var(--fos-text-secondary); margin-top: 3px; }

/* ════════ DARK ════════ */
body.fos-dark .FS-hatirlatma,
body.fos-dark .FS-hatirlatma-kutu { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.35); }
body.fos-dark .FS-hatirlatma-baslik { color: #fbbf24; }
body.fos-dark .FS-hatirlatma-metin { color: var(--fos-dark-text); }
body.fos-dark .FS-imza-alan { border-color: var(--fos-dark-border); }
body.fos-dark .FS-imza-satir { border-color: var(--fos-dark-border); }
body.fos-dark .FS-imza-onizleme { border-color: var(--fos-dark-border); }
body.fos-dark .FS-imza-metin { color: var(--fos-dark-muted); }

/* ════════ MOBILE ════════ */
@media (max-width: 768px) {
    .FS-hatirlatma { padding: 9px 12px; }
    .FS-hatirlatma-metin { font-size: 12.5px; }
    /* Telefonda modal neredeyse tam ekran — imza alanı geniş */
    .FS-onay-modal { width: 96%; max-height: 94vh; }
    .FS-hatirlatma-kutu { max-height: 26vh; }
    .FS-imza-alan { height: 170px; }
    .FS-onay-modal .FS-tnt-form-alt .fos-btn { flex: 1 1 auto; justify-content: center; }
    .FS-imza-satir { grid-template-columns: 96px 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   FUAR KARTI — sekmeli düzen + ayar kartları (FS-kart-sekmeler, FS-ayar-*)
   Portal hatırlatma dil sekmeleri (FS-hatirlatma-diller)
   KURAL 14: light + dark + mobile birlikte.
   ════════════════════════════════════════════════════════════════ */

/* ── Kart üstü sekmeler — dil sekmesinden biraz büyük, ikonlu ── */
.FS-kart-sekmeler { margin: 0 0 16px; padding-bottom: 8px; }
.FS-kart-sekmeler .FS-dil-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; font-size: 13px; }

/* ── Ayar kartı — modül/portal sekmelerinde yan yana kutular ── */
.FS-ayar-kart {
    height: 100%; padding: 12px 14px;
    border: 1px solid var(--fos-light-border); border-radius: var(--fos-radius-lg);
    background: var(--fos-light-bg);
}
.FS-ayar-baslik {
    display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
    color: var(--fos-text-primary);
}
.FS-ayar-baslik > i { color: var(--fos-orange); }
.FS-ayar-kart > .fos-hint { margin-bottom: 8px; min-height: 2.9em; }
.FS-ayar-kart .FS-dil-tabs { margin: 2px 0 8px; }
.FS-kvkk-giris { min-height: 220px; }

/* ── Portal hatırlatma kutusundaki dil sekmeleri ── */
.FS-hatirlatma-diller { margin: 8px 0 2px; border-bottom-color: #fcd34d; }

/* ════════ DARK ════════ */
body.fos-dark .FS-ayar-kart { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); }
body.fos-dark .FS-ayar-baslik { color: var(--fos-dark-text); }
body.fos-dark .FS-hatirlatma-diller { border-bottom-color: rgba(245,158,11,.35); }

/* ════════ MOBILE ════════ */
@media (max-width: 768px) {
    .FS-kart-sekmeler .FS-dil-tab { padding: 6px 12px; font-size: 12px; }
    .FS-ayar-kart { padding: 10px 12px; }
    .FS-ayar-kart > .fos-hint { min-height: 0; }
    .FS-kvkk-giris { min-height: 160px; }
}

/* ── UÇUŞ TARİH ARALIĞI İPUCU — "fuar tarihleri arasında olmalı: 10.11 – 14.11" ── */
.FS-ucs-aralik { color: #b45309; font-weight: 600; display: flex; align-items: center; gap: 6px; }
body.fos-dark .FS-ucs-aralik { color: #fbbf24; }
@media (max-width: 768px) {
    .FS-ucs-aralik { font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════════
   REFERANS SEVİYESİ — rozet, öneren çipleri, seviye ayar ekranı (FS-ref-*, FS-rsv-*)
   Rozet rengi satır içi --ref-renk değişkeninden gelir (kullanıcı tanımlı).
   KURAL 14: light + dark + mobile birlikte.
   ════════════════════════════════════════════════════════════════ */

/* ── Seviye rozeti ── */
.FS-ref-rozet {
    --ref-renk: #64748b;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 20px; white-space: nowrap;
    font-size: 11px; font-weight: 700; letter-spacing: .3px; color: #fff;
    background: var(--ref-renk); box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* ── Öneren çipleri ── */
.FS-ref-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.FS-ref-liste:empty { display: none; }
.FS-ref-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 20px;
    border: 1px solid var(--fos-light-border); background: var(--fos-light-bg);
    font-size: 12px; font-weight: 600; color: var(--fos-text-primary);
}
.FS-ref-chip-sil {
    border: 0; background: transparent; cursor: pointer;
    color: var(--fos-text-muted); font-size: 15px; line-height: 1;
    width: 20px; height: 20px; border-radius: 50%; margin-right: -4px;
}
.FS-ref-chip-sil:hover { color: var(--fos-danger); background: var(--fos-danger-bg); }

/* ── Seviye ayar satırı: önizleme | ad | eşik | renk | işlem ── */
.FS-rsv-satir {
    display: grid; grid-template-columns: 140px 1fr 120px 70px auto;
    gap: 8px; align-items: center; padding: 8px 0;
    border-bottom: 1px dashed var(--fos-light-border);
}
.FS-rsv-satir:last-child { border-bottom: 0; }
.FS-rsv-baslik { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--fos-text-muted); padding-top: 0; }
.FS-rsv-onizleme { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.FS-rsv-renk { height: 36px; padding: 2px 4px; cursor: pointer; }

/* ════════ DARK ════════ */
body.fos-dark .FS-ref-chip { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); color: var(--fos-dark-text); }
body.fos-dark .FS-ref-chip-sil { color: var(--fos-dark-muted); }
body.fos-dark .FS-rsv-satir { border-color: var(--fos-dark-border); }
body.fos-dark .FS-rsv-baslik { color: var(--fos-dark-muted); }

/* ════════ MOBILE ════════ */
@media (max-width: 768px) {
    .FS-rsv-satir { grid-template-columns: 1fr 90px 56px; }
    .FS-rsv-onizleme { grid-column: 1 / -1; }
    .FS-rsv-satir > input[name="adi"] { grid-column: 1 / 2; }
    .FS-rsv-satir > .d-flex, .FS-rsv-satir > button { grid-column: 1 / -1; justify-self: stretch; }
    .FS-rsv-baslik { display: none; }
}

/* ── REFERANS İZLEME — seviye filtre çipleri + isim listesi (FS-ref-filtre*) ── */
.FS-ref-filtreler { display: flex; flex-wrap: wrap; gap: 6px; }
.FS-ref-filtre {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 20px; text-decoration: none;
    border: 1px solid var(--fos-light-border); background: var(--fos-light-surface);
    font-size: 12px; font-weight: 600; color: var(--fos-text-secondary);
}
.FS-ref-filtre:hover { border-color: var(--fos-orange); color: var(--fos-text-primary); }
.FS-ref-filtre.active { border-color: var(--fos-orange); box-shadow: 0 0 0 2px var(--fos-orange-muted); color: var(--fos-text-primary); }
.FS-ref-filtre-sayi { font-weight: 800; }
.FS-ref-isimler { font-size: 12px; line-height: 1.5; color: var(--fos-text-secondary); }

body.fos-dark .FS-ref-filtre { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); color: var(--fos-dark-muted); }
body.fos-dark .FS-ref-filtre.active,
body.fos-dark .FS-ref-filtre:hover { border-color: var(--fos-orange); color: var(--fos-dark-text); }
body.fos-dark .FS-ref-isimler { color: var(--fos-dark-muted); }

@media (max-width: 768px) {
    .FS-ref-filtreler { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .FS-ref-filtre { flex: 0 0 auto; }
}

/* ================================================================
   LİSANS BELGESİ (LSB) — Views/Lisans/Durum.cshtml
   07.10.2026: Lisans durumu ekranı müşteriye gönderilecek belge
   olarak tasarlandı. Ekranda özet, baskıda / PDF'te tek sayfa.
   Sıra: sonuç → dört özet → kimlik kodları + doğrulama → dayanak.
   ================================================================ */

/* Belge kabı — tek kart, üstte ince marka çizgisi */
.lsb {
    position: relative;
    max-width: 1000px;
    margin: 0 auto 24px;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: 16px;
    box-shadow: var(--fos-shadow);
    overflow: hidden;
    color: var(--fos-text-primary);
}
/* Üst kenarda marka geçişi — belgeye kimlik verir */
.lsb::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--fos-accent-grad);
}

/* Üst bant: logo solda, belge adı ve tarih sağda */
.lsb-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 32px 18px;
    border-bottom: 1px solid var(--fos-light-border);
}
.lsb-marka { display: flex; align-items: center; gap: 11px; }
.lsb-marka-ikon { width: 40px; height: 40px; flex-shrink: 0; }
.lsb-marka-metin { display: flex; flex-direction: column; line-height: 1; }
.lsb-marka-ad {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--fos-text-primary);
}
/* "OS" kısmı — marka geçişi */
.lsb-marka-ad .os {
    background: var(--fos-accent-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lsb-marka-alt {
    margin-top: 5px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fos-text-muted);
}
.lsb-kunye { text-align: right; }
.lsb-belge-adi {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--fos-orange);
}
.lsb-belge-tarih {
    margin-top: 3px;
    font-size: 13px;
    color: var(--fos-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Kahraman: mühür + tek cümlelik sonuç */
.lsb-kahraman {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 30px 32px 26px;
}
.lsb-ok .lsb-kahraman  { background: linear-gradient(120deg, var(--fos-success-bg) 0%, rgba(236,253,245,0) 72%); }
.lsb-ret .lsb-kahraman { background: linear-gradient(120deg, var(--fos-danger-bg) 0%, rgba(254,242,242,0) 72%); }
.lsb-muhur {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
}
.lsb-ok .lsb-muhur  { background: var(--fos-success); box-shadow: 0 0 0 7px rgba(5,150,105,0.12); }
.lsb-ret .lsb-muhur { background: var(--fos-danger);  box-shadow: 0 0 0 7px rgba(220,38,38,0.12); }
.lsb-baslik {
    margin: 0 0 5px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.15;
    color: var(--fos-text-primary);
}
.lsb-aciklama {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--fos-text-secondary);
}

/* Dört özet kutusu */
.lsb-ozet {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 6px 32px 0;
}
.lsb-kutu {
    padding: 16px 18px;
    border: 1px solid var(--fos-light-border);
    border-radius: 12px;
    background: #F8FAFD;
}
.lsb-kutu-uyari { border-color: var(--fos-warning); background: var(--fos-warning-bg); }
.lsb-kutu-etiket {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--fos-text-muted);
}
.lsb-kutu-deger {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--fos-text-primary);
}
.lsb-kutu-deger-metin { font-size: 17px; font-weight: 700; letter-spacing: 0; }
.lsb-kutu-alt { margin-top: 5px; font-size: 12.5px; color: var(--fos-text-secondary); }
.lsb-yesil { color: var(--fos-success); }

/* Süresiz modelde güncelleme notu */
.lsb-not { margin: 12px 32px 0; font-size: 12.5px; color: var(--fos-text-muted); }

/* İki sütun: kimlik kodları | doğrulama */
.lsb-bolumler {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 24px 32px 0;
    border-top: 1px solid var(--fos-light-border);
}
.lsb-bolum { padding: 20px 0 22px; }
.lsb-bolum:first-child { padding-right: 28px; border-right: 1px solid var(--fos-light-border); }
.lsb-bolum:last-child  { padding-left: 28px; }
.lsb-bolum-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fos-text-secondary);
}
/* Başlık önünde kısa marka çizgisi */
.lsb-bolum-baslik::before {
    content: '';
    width: 14px; height: 3px;
    border-radius: 2px;
    background: var(--fos-accent-grad);
}
.lsb-liste {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: 10px 16px;
    margin: 0;
}
.lsb-liste dt { font-size: 12.5px; font-weight: 500; color: var(--fos-text-secondary); }
.lsb-liste dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--fos-text-primary); }
/* Kodlar asla bölünmez: "LSN-2026-" / "000013" okunmaz */
.lsb-kod { font-family: ui-monospace, Consolas, 'Cascadia Mono', monospace; letter-spacing: 0.3px; white-space: nowrap; }

/* Sayfa başlığındaki eylem düğmeleri */
.lsb-eylemler { flex-wrap: wrap; justify-content: flex-end; }
.lsb-soluk { font-size: 12px; font-weight: 400; color: var(--fos-text-muted); }
.lsb-ipucu { margin: 14px 0 0; font-size: 12px; color: var(--fos-text-muted); }

/* Belge altı: dayanak cümlesi */
.lsb-alt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 14px 32px;
    background: #F8FAFD;
    border-top: 1px solid var(--fos-light-border);
    font-size: 12px;
    color: var(--fos-text-secondary);
}
.lsb-alt i { color: var(--fos-success); font-size: 14px; }
.lsb-ret .lsb-alt i { color: var(--fos-danger); }

/* Dark */
body.fos-dark .lsb { background: var(--fos-dark-card); border-color: var(--fos-dark-border); color: var(--fos-dark-text); }
body.fos-dark .lsb-ust,
body.fos-dark .lsb-bolumler,
body.fos-dark .lsb-bolum:first-child,
body.fos-dark .lsb-alt { border-color: var(--fos-dark-border); }
body.fos-dark .lsb-marka-ad { color: var(--fos-dark-text); }
body.fos-dark .lsb-marka-alt { color: var(--fos-dark-muted); }
body.fos-dark .lsb-belge-tarih,
body.fos-dark .lsb-aciklama,
body.fos-dark .lsb-kutu-alt,
body.fos-dark .lsb-bolum-baslik,
body.fos-dark .lsb-liste dt,
body.fos-dark .lsb-alt { color: var(--fos-dark-muted); }
body.fos-dark .lsb-baslik,
body.fos-dark .lsb-kutu-deger,
body.fos-dark .lsb-liste dd { color: var(--fos-dark-text); }
body.fos-dark .lsb-ok .lsb-kahraman  { background: linear-gradient(120deg, rgba(5,150,105,0.16) 0%, rgba(5,150,105,0) 72%); }
body.fos-dark .lsb-ret .lsb-kahraman { background: linear-gradient(120deg, rgba(220,38,38,0.16) 0%, rgba(220,38,38,0) 72%); }
body.fos-dark .lsb-kutu { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); }
body.fos-dark .lsb-kutu-uyari { background: rgba(217,119,6,0.12); border-color: var(--fos-warning); }
body.fos-dark .lsb-alt { background: var(--fos-dark-surface); }
body.fos-dark .lsb-yesil { color: #34D399; }

/* Mobile */
@media (max-width: 768px) {
    .lsb-ust { flex-wrap: wrap; padding: 20px 18px 14px; }
    .lsb-kunye { width: 100%; text-align: left; }
    .lsb-eylemler { justify-content: flex-start; }
    .lsb-marka-ikon { width: 34px; height: 34px; }
    .lsb-marka-ad { font-size: 18px; }
    .lsb-kahraman { gap: 14px; padding: 22px 18px 18px; }
    .lsb-muhur { width: 48px; height: 48px; font-size: 22px; }
    .lsb-baslik { font-size: 21px; }
    .lsb-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 4px 18px 0; }
    .lsb-kutu-deger { font-size: 20px; }
    .lsb-not { margin: 10px 18px 0; }
    .lsb-bolumler { grid-template-columns: 1fr; margin: 18px 18px 0; }
    .lsb-bolum:first-child { padding-right: 0; border-right: none; border-bottom: 1px solid var(--fos-light-border); }
    .lsb-bolum:last-child  { padding-left: 0; }
    body.fos-dark .lsb-bolum:first-child { border-bottom-color: var(--fos-dark-border); }
    .lsb-liste { grid-template-columns: minmax(120px, auto) 1fr; }
    .lsb-alt { padding: 12px 18px; align-items: flex-start; }
}

/* Baskı / PDF: tek A4 sayfa, her zaman açık tema, renkler korunur */
@media print {
    @page { size: A4; margin: 12mm; }
    .fos-footer { display: none !important; }
    .lsb, body.fos-dark .lsb {
        max-width: none;
        margin: 0;
        background: #fff !important;
        color: #0F172A !important;
        border: 1px solid #DDE5F0 !important;
        box-shadow: none !important;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body.fos-dark .lsb-marka-ad { color: #0F172A !important; }
    /* Geçişli yazı PDF'te çevresinde kutu izi bırakıyor — baskıda düz turuncu */
    .lsb-marka-ad .os { background: none !important; -webkit-text-fill-color: #F97316 !important; color: #F97316 !important; }
    /* A4 dar: iç boşluklar ve etiket sütunu daralır, kodlar tek satırda kalır */
    .lsb-ust { padding: 20px 24px 14px; }
    .lsb-kahraman { padding: 24px 24px 20px; }
    .lsb-ozet { padding: 4px 24px 0; gap: 10px; }
    .lsb-bolumler { margin: 20px 24px 0; }
    .lsb-bolum:first-child { padding-right: 18px; }
    .lsb-bolum:last-child  { padding-left: 18px; }
    .lsb-liste { grid-template-columns: minmax(112px, auto) 1fr; gap: 9px 12px; }
    .lsb-alt { padding: 12px 24px; }
    body.fos-dark .lsb-kutu, body.fos-dark .lsb-alt { background: #F8FAFD !important; border-color: #DDE5F0 !important; }
    body.fos-dark .lsb-baslik, body.fos-dark .lsb-kutu-deger, body.fos-dark .lsb-liste dd { color: #0F172A !important; }
    body.fos-dark .lsb-ok .lsb-kahraman  { background: linear-gradient(120deg, #ECFDF5 0%, rgba(236,253,245,0) 72%) !important; }
    body.fos-dark .lsb-ret .lsb-kahraman { background: linear-gradient(120deg, #FEF2F2 0%, rgba(254,242,242,0) 72%) !important; }
}


/* ============================================================
   EKRAN YARDIMI (F1) — FS-yrd-*   (Helpers/YardimHelper.cs, fuaros.js FosYardim, Views/Yardim)
   (?) düğmesi · sağdan açılan çekmece (telefonda alttan) · bölüm türleri · Göster parlaması
   · Bana Sistemi Öğret panosu · tam anlatım · senaryolar · kapsam denetimi
   ============================================================ */

/* ── (?) DÜĞMESİ — üst çubukta, her ekranda aynı yerde ── */
.FS-yrd-btn-wrap { position: relative; display: flex; align-items: center; }
.FS-yrd-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.07);
    color: #E2E8F0;
    font-size: 16px;
    cursor: pointer;
    transition: background .18s var(--fos-ease), border-color .18s, box-shadow .18s, color .18s, transform .18s;
}
.FS-yrd-btn:hover, .FS-yrd-btn:focus-visible {
    background: rgba(249,115,22,0.16);
    border-color: rgba(249,115,22,0.55);
    color: #FDBA74;
    box-shadow: 0 0 0 3px rgba(249,115,22,0.18);
    outline: none;
}
.FS-yrd-btn:active { transform: scale(.94); }
/* Giriş ekranında üst çubuk yok — sağ üst köşede sabit */
.FS-yrd-btn-sabit { position: fixed; top: 14px; right: 16px; z-index: 1050; }
.FS-yrd-btn-sabit .FS-yrd-btn { background: rgba(15,23,42,0.55); backdrop-filter: blur(6px); }
/* Portal çubuğunda en sağa it */
.FS-yrd-btn-portal { margin-left: auto; }

/* İlk ziyarette nabız + balon */
.FS-yrd-nabiz { animation: FSyrdNabiz 1.6s var(--fos-ease) infinite; }
@keyframes FSyrdNabiz {
    0%   { box-shadow: 0 0 0 0 rgba(249,115,22,0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(249,115,22,0); }
    100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}
.FS-yrd-ipucu-balon {
    position: absolute; top: calc(100% + 12px); right: -6px;
    width: 260px;
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 12px;
    background: var(--fos-light-surface);
    color: var(--fos-text-primary);
    border: 1px solid var(--fos-light-border);
    border-left: 3px solid var(--fos-orange);
    border-radius: var(--fos-radius-lg);
    box-shadow: var(--fos-shadow-lg);
    font-size: 12.5px; line-height: 1.45;
    z-index: 1100;
    animation: FSyrdBalon .35s var(--fos-ease-bounce);
}
.FS-yrd-ipucu-balon::before {
    content: ""; position: absolute; top: -7px; right: 16px;
    width: 12px; height: 12px; transform: rotate(45deg);
    background: inherit; border-left: 1px solid var(--fos-light-border); border-top: 1px solid var(--fos-light-border);
}
.FS-yrd-ipucu-balon > i { color: var(--fos-orange); font-size: 16px; margin-top: 1px; }
.FS-yrd-ipucu-balon > span { flex: 1; }
.FS-yrd-ipucu-balon button { border: 0; background: none; color: var(--fos-text-muted); padding: 0 2px; font-size: 16px; line-height: 1; cursor: pointer; }
@keyframes FSyrdBalon { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── ÇEKMECE ── */
.FS-yrd-perde {
    position: fixed; inset: 0;
    background: rgba(7,13,26,0.42);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .22s var(--fos-ease), visibility .22s;
    z-index: 2000;
}
.FS-yrd-cekmece {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(460px, 100vw);
    display: flex; flex-direction: column;
    background: var(--fos-light-surface);
    color: var(--fos-text-primary);
    font-family: var(--fos-font);
    box-shadow: -18px 0 48px rgba(15,23,42,0.22);
    transform: translateX(104%);
    transition: transform .28s var(--fos-ease);
    z-index: 2001;
    outline: none;
}
body.FS-yrd-acik .FS-yrd-perde { opacity: 1; visibility: visible; }
body.FS-yrd-acik .FS-yrd-cekmece { transform: none; }
html[dir="rtl"] .FS-yrd-cekmece { right: auto; left: 0; transform: translateX(-104%); box-shadow: 18px 0 48px rgba(15,23,42,0.22); }
html[dir="rtl"] body.FS-yrd-acik .FS-yrd-cekmece { transform: none; }

.FS-yrd-ust {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--fos-light-border);
    background: linear-gradient(120deg, rgba(249,115,22,0.10) 0%, rgba(251,191,36,0.04) 55%, rgba(255,255,255,0) 100%);
    position: relative;
}
.FS-yrd-ust::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fos-accent-grad); }
.FS-yrd-ust-ikon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: var(--fos-accent-grad); color: #fff; font-size: 18px;
    box-shadow: var(--fos-shadow-orange);
}
.FS-yrd-ust-metin { flex: 1; min-width: 0; }
.FS-yrd-ust-baslik { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.FS-yrd-ust-alt { font-size: 11.5px; color: var(--fos-text-secondary); margin-top: 2px; }
.FS-yrd-kapat {
    width: 32px; height: 32px; flex-shrink: 0;
    border: 1px solid var(--fos-light-border); border-radius: 9px;
    background: var(--fos-light-surface); color: var(--fos-text-secondary);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.FS-yrd-kapat:hover { background: var(--fos-orange-muted); color: var(--fos-orange); border-color: rgba(249,115,22,.4); }
.FS-yrd-govde { flex: 1; overflow-y: auto; padding: 16px 18px 22px; overscroll-behavior: contain; font-size: 13.5px; line-height: 1.6; }
.FS-yrd-ayak {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--fos-light-border);
    background: #F8FAFD;
}
.FS-yrd-ayak .fos-btn { flex: 1 1 auto; justify-content: center; }

/* Yükleniyor iskeleti */
.FS-yrd-iskelet span {
    display: block; height: 12px; border-radius: 6px; margin-bottom: 12px;
    background: linear-gradient(90deg, #EEF2F8 25%, #E2E8F2 37%, #EEF2F8 63%);
    background-size: 400% 100%;
    animation: FSyrdIskelet 1.2s ease infinite;
}
.FS-yrd-iskelet span:nth-child(1) { width: 92%; height: 16px; }
.FS-yrd-iskelet span:nth-child(2) { width: 74%; }
.FS-yrd-iskelet span:nth-child(3) { width: 85%; }
.FS-yrd-iskelet span:nth-child(4) { width: 58%; }
@keyframes FSyrdIskelet { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Boş durum */
.FS-yrd-bos { text-align: center; padding: 36px 12px; color: var(--fos-text-secondary); }
.FS-yrd-bos i { display: block; font-size: 36px; color: var(--fos-orange); opacity: .75; margin-bottom: 10px; }
.FS-yrd-bos p { margin: 0 auto; max-width: 320px; }

/* ── İÇERİK — bölüm türleri ── */
.FS-yrd-ozet {
    margin: 0 0 16px;
    padding: 11px 13px;
    font-size: 14px; font-weight: 500; line-height: 1.55;
    background: var(--fos-orange-muted);
    border-radius: var(--fos-radius);
    border-left: 3px solid var(--fos-orange);
}
.FS-yrd-bolum { margin-bottom: 18px; }
.FS-yrd-bolum p { margin: 0 0 8px; }
.FS-yrd-bolum-baslik {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 9px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--fos-text-secondary);
}
.FS-yrd-bolum-baslik > span { flex: 1; display: flex; align-items: center; gap: 8px; }
.FS-yrd-bolum-baslik > span::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--fos-accent-grad); flex-shrink: 0; }

/* Adım — numaralı rozet */
.FS-yrd-adim { list-style: none; counter-reset: yrdAdim; padding: 0; margin: 0; }
.FS-yrd-adim > li {
    counter-increment: yrdAdim;
    position: relative;
    padding: 0 0 12px 36px;
    min-height: 26px;
}
.FS-yrd-adim > li::before {
    content: counter(yrdAdim);
    position: absolute; left: 0; top: 0;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    background: var(--fos-accent-grad);
    box-shadow: 0 3px 8px rgba(249,115,22,.28);
}
.FS-yrd-adim > li:not(:last-child)::after {
    content: ""; position: absolute; left: 11.5px; top: 27px; bottom: 3px; width: 1px;
    background: linear-gradient(var(--fos-orange), rgba(249,115,22,0));
    opacity: .45;
}
html[dir="rtl"] .FS-yrd-adim > li { padding: 0 36px 12px 0; }
html[dir="rtl"] .FS-yrd-adim > li::before { left: auto; right: 0; }
html[dir="rtl"] .FS-yrd-adim > li:not(:last-child)::after { left: auto; right: 11.5px; }

/* Liste — turuncu nokta */
.FS-yrd-liste { list-style: none; padding: 0; margin: 0; }
.FS-yrd-liste > li { position: relative; padding: 0 0 7px 18px; }
.FS-yrd-liste > li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--fos-orange); }
html[dir="rtl"] .FS-yrd-liste > li { padding: 0 18px 7px 0; }
html[dir="rtl"] .FS-yrd-liste > li::before { left: auto; right: 3px; }

/* Tanım — ekrandaki alan gibi */
.FS-yrd-tanim { margin: 0; display: grid; gap: 8px; }
.FS-yrd-tanim-satir {
    padding: 10px 12px;
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius);
    background: #FBFCFE;
}
.FS-yrd-tanim dt { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.FS-yrd-tanim dd { margin: 0; color: var(--fos-text-secondary); }
.FS-yrd-alan {
    display: inline-flex; align-items: center;
    padding: 2px 9px;
    font-size: 12.5px; font-weight: 600;
    color: var(--fos-text-primary);
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    box-shadow: inset 0 -1px 0 #E2E8F0;
}

/* SSS — açılır */
.FS-yrd-sss details {
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius);
    margin-bottom: 7px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.FS-yrd-sss details[open] { border-color: rgba(249,115,22,.45); box-shadow: 0 2px 10px rgba(249,115,22,.08); }
.FS-yrd-sss summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px;
    font-weight: 600; font-size: 13px;
}
.FS-yrd-sss summary::-webkit-details-marker { display: none; }
.FS-yrd-sss summary::before {
    content: "\F505"; /* bi-question-circle */
    font-family: "bootstrap-icons"; color: var(--fos-orange); font-weight: 400; flex-shrink: 0;
}
.FS-yrd-sss summary::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons"; margin-left: auto; color: var(--fos-text-muted); font-weight: 400;
    transition: transform .18s var(--fos-ease); flex-shrink: 0;
}
html[dir="rtl"] .FS-yrd-sss summary::after { margin-left: 0; margin-right: auto; }
.FS-yrd-sss details[open] summary::after { transform: rotate(180deg); }
.FS-yrd-sss-cevap { padding: 0 12px 11px 34px; color: var(--fos-text-secondary); }
html[dir="rtl"] .FS-yrd-sss-cevap { padding: 0 34px 11px 12px; }

/* Uyarı / ipucu kutusu */
.FS-yrd-kutu { display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--fos-radius); border: 1px solid; }
.FS-yrd-kutu > i { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.FS-yrd-kutu > div { flex: 1; }
.FS-yrd-kutu p:last-child { margin-bottom: 0; }
.FS-yrd-uyari { background: var(--fos-warning-bg); border-color: #FCD9A8; }
.FS-yrd-uyari > i { color: var(--fos-warning); }
.FS-yrd-ipucu { background: var(--fos-success-bg); border-color: #A7E8CF; }
.FS-yrd-ipucu > i { color: var(--fos-success); }

/* Ekran öğesi çipi ve başka yardıma bağlantı */
.FS-yrd-oge {
    display: inline-block;
    padding: 0 7px;
    font-size: .92em; font-weight: 600;
    color: #9A3412;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 5px;
    white-space: nowrap;
    line-height: 1.55;
}
.FS-yrd-bag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 7px;
    font-size: .92em; font-weight: 600;
    color: var(--fos-info);
    background: var(--fos-info-bg);
    border: 1px solid #BFDBFE;
    border-radius: 5px;
    text-decoration: none;
    line-height: 1.55;
}
.FS-yrd-bag:hover { border-color: var(--fos-info); text-decoration: none; }

/* Göster düğmesi */
.FS-yrd-goster {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--fos-orange);
    background: var(--fos-orange-muted);
    border: 1px solid rgba(249,115,22,.35);
    border-radius: 20px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.FS-yrd-goster:hover { background: var(--fos-orange); color: #fff; }
.FS-yrd-goster[hidden] { display: none; }
.FS-yrd-sss-cevap .FS-yrd-goster { margin-top: 6px; }

/* Ekranda parlama — Göster */
.FS-yrd-parla {
    position: relative;
    animation: FSyrdParla 2.4s var(--fos-ease);
    border-radius: 6px;
}
@keyframes FSyrdParla {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
    12%      { box-shadow: 0 0 0 4px rgba(249,115,22,.85), 0 0 0 12px rgba(249,115,22,.22); }
    45%      { box-shadow: 0 0 0 3px rgba(249,115,22,.75), 0 0 0 18px rgba(249,115,22,0); }
    70%      { box-shadow: 0 0 0 4px rgba(249,115,22,.85), 0 0 0 10px rgba(249,115,22,.18); }
}

/* "Yardıma dön" hapı */
.FS-yrd-don {
    position: fixed; right: 20px; bottom: 22px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border: 0; border-radius: 40px;
    background: var(--fos-dark-base); color: #fff;
    font-size: 13px; font-weight: 600;
    box-shadow: var(--fos-shadow-lg);
    transform: translateY(140%); opacity: 0;
    transition: transform .25s var(--fos-ease), opacity .25s;
    z-index: 1999; cursor: pointer;
}
.FS-yrd-don i { color: var(--fos-orange-end); }
.FS-yrd-don.gorunur { transform: none; opacity: 1; }
html[dir="rtl"] .FS-yrd-don { right: auto; left: 20px; }

/* Çekmecede "Devamını oku" ve detay (portal — tam sayfa yok) */
.FS-yrd-devam {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 4px 0 14px;
    padding: 9px;
    border: 1px dashed rgba(249,115,22,.5);
    border-radius: var(--fos-radius);
    background: transparent; color: var(--fos-orange);
    font-weight: 600; font-size: 13px; cursor: pointer;
}
.FS-yrd-devam i { transition: transform .18s; }
.FS-yrd-devam[aria-expanded="true"] i { transform: rotate(180deg); }
.FS-yrd-detay-baslik {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px; padding-top: 12px;
    border-top: 2px solid var(--fos-light-border);
    font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--fos-orange);
}

/* Sidebar — Bana Sistemi Öğret */
.FS-SB-yardim .FS-SB-yardim-kbd {
    margin-left: auto;
    padding: 1px 6px;
    font-family: var(--fos-font-mono); font-size: 10px;
    color: #CBD5E1; background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14); border-radius: 4px;
}
html[dir="rtl"] .FS-SB-yardim .FS-SB-yardim-kbd { margin-left: 0; margin-right: auto; }

/* ── SAYFALAR (Views/Yardim) ── */
.FS-yrd-sayfa { max-width: 1240px; }
.FS-yrd-hero {
    position: relative; overflow: hidden;
    padding: 26px 26px 22px;
    margin-bottom: 18px;
    border-radius: var(--fos-radius-xl);
    background:
        radial-gradient(circle at 92% 8%, rgba(251,191,36,.28), rgba(251,191,36,0) 42%),
        radial-gradient(circle at 8% 120%, rgba(249,115,22,.30), rgba(249,115,22,0) 48%),
        linear-gradient(135deg, #0B1324 0%, #111C30 100%);
    color: #E2E8F2;
    box-shadow: var(--fos-shadow-md);
}
.FS-yrd-hero h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.FS-yrd-hero h1 i { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--fos-accent-grad); font-size: 21px; box-shadow: var(--fos-shadow-orange); }
.FS-yrd-hero p { margin: 0 0 18px; max-width: 720px; color: #A9B8CF; font-size: 13.5px; }
.FS-yrd-ara { display: flex; gap: 8px; max-width: 720px; }
.FS-yrd-ara-kutu { position: relative; flex: 1; }
.FS-yrd-ara-kutu i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fos-text-muted); }
.FS-yrd-ara-kutu input {
    width: 100%; height: 46px;
    padding: 0 14px 0 40px;
    border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
    background: rgba(255,255,255,.96); color: var(--fos-text-primary);
    font-size: 14px; font-family: var(--fos-font);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.FS-yrd-ara-kutu input:focus { outline: none; box-shadow: 0 0 0 3px rgba(249,115,22,.45), 0 6px 18px rgba(0,0,0,.25); }
html[dir="rtl"] .FS-yrd-ara-kutu i { left: auto; right: 14px; }
html[dir="rtl"] .FS-yrd-ara-kutu input { padding: 0 40px 0 14px; }
.FS-yrd-ara .fos-btn { height: 46px; border-radius: 12px; padding: 0 20px; }
.FS-yrd-hero-ipucu { margin-top: 12px; font-size: 12px; color: #8EA2C0; display: flex; align-items: center; gap: 7px; }
.FS-yrd-hero-ipucu kbd { font-family: var(--fos-font-mono); font-size: 11px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; }

.FS-yrd-sayac { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 8px; }
.FS-yrd-sayac-kutu {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg);
    box-shadow: var(--fos-shadow-xs);
}
.FS-yrd-sayac-kutu > i { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--fos-orange); background: var(--fos-orange-muted); }
.FS-yrd-sayac-deger { font-size: 22px; font-weight: 800; line-height: 1; color: var(--fos-text-primary); }
.FS-yrd-sayac-etiket { font-size: 11.5px; color: var(--fos-text-secondary); margin-top: 3px; }
.FS-yrd-durust { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fos-text-secondary); margin: 0 0 18px; }
.FS-yrd-durust i { color: var(--fos-warning); }

.FS-yrd-bolum-ust { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; }
.FS-yrd-bolum-ust h2 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fos-text-secondary); display: flex; align-items: center; gap: 8px; }
.FS-yrd-bolum-ust h2 i { color: var(--fos-orange); font-size: 15px; }
.FS-yrd-bolum-ust .FS-yrd-cizgi { flex: 1; height: 1px; background: var(--fos-light-border); }
.FS-yrd-bolum-ust a { font-size: 12.5px; font-weight: 600; color: var(--fos-orange); text-decoration: none; white-space: nowrap; }

.FS-yrd-baslangic { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.FS-yrd-bas-kart {
    display: flex; gap: 12px;
    padding: 14px;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg);
    text-decoration: none; color: var(--fos-text-primary);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.FS-yrd-bas-kart:hover { border-color: rgba(249,115,22,.5); box-shadow: var(--fos-shadow-md); transform: translateY(-2px); color: var(--fos-text-primary); text-decoration: none; }
.FS-yrd-bas-no { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: var(--fos-accent-grad); }
.FS-yrd-bas-baslik { font-weight: 700; font-size: 13.5px; line-height: 1.35; margin-bottom: 4px; }
.FS-yrd-bas-ozet { font-size: 12px; color: var(--fos-text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.FS-yrd-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.FS-yrd-kart {
    position: relative;
    display: flex; flex-direction: column; gap: 6px;
    padding: 13px 14px 12px;
    background: var(--fos-light-surface);
    border: 1px solid var(--fos-light-border);
    border-radius: var(--fos-radius-lg);
    text-decoration: none; color: var(--fos-text-primary);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.FS-yrd-kart::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fos-accent-grad); opacity: 0; transition: opacity .18s; }
.FS-yrd-kart:hover { border-color: rgba(249,115,22,.45); box-shadow: var(--fos-shadow-md); transform: translateY(-1px); color: var(--fos-text-primary); text-decoration: none; }
.FS-yrd-kart:hover::before { opacity: 1; }
.FS-yrd-kart-baslik { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.FS-yrd-kart-baslik i { margin-left: auto; color: var(--fos-text-muted); transition: transform .18s, color .18s; }
.FS-yrd-kart:hover .FS-yrd-kart-baslik i { transform: translateX(3px); color: var(--fos-orange); }
html[dir="rtl"] .FS-yrd-kart-baslik i { margin-left: 0; margin-right: auto; transform: scaleX(-1); }
.FS-yrd-kart-ozet { font-size: 12px; color: var(--fos-text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.FS-yrd-kart-rozetler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 4px; }
.FS-yrd-rozet { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 700; border: 1px solid; }
.FS-yrd-rozet-detay { color: var(--fos-success); background: var(--fos-success-bg); border-color: #A7E8CF; }
.FS-yrd-rozet-kisa { color: var(--fos-text-secondary); background: #F1F5F9; border-color: #E2E8F0; }
.FS-yrd-rozet-senaryo { color: #7C3AED; background: #F5F3FF; border-color: #DDD6FE; }

/* Tam anlatım sayfası */
.FS-yrd-yol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--fos-text-secondary); margin-bottom: 10px; }
.FS-yrd-yol a { color: var(--fos-orange); text-decoration: none; font-weight: 600; }
.FS-yrd-yol i { font-size: 10px; color: var(--fos-text-muted); }
.FS-yrd-ekran-baslik { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.FS-yrd-ekran-baslik h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; flex: 1; min-width: 200px; }
.FS-yrd-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.FS-yrd-yan { position: sticky; top: calc(var(--fos-navbar-h) + 16px); display: grid; gap: 12px; }
.FS-yrd-yan-kart { background: var(--fos-light-surface); border: 1px solid var(--fos-light-border); border-radius: var(--fos-radius-lg); padding: 13px 14px; }
.FS-yrd-yan-baslik { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--fos-text-muted); margin-bottom: 8px; }
.FS-yrd-yan-liste { list-style: none; margin: 0; padding: 0; }
.FS-yrd-yan-liste li { margin-bottom: 2px; }
.FS-yrd-yan-liste a { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 6px; font-size: 12.5px; color: var(--fos-text-primary); text-decoration: none; line-height: 1.35; }
.FS-yrd-yan-liste a:hover { background: var(--fos-orange-muted); color: var(--fos-orange); }
.FS-yrd-yan-liste a i { color: var(--fos-orange); font-size: 12px; }
.FS-yrd-kart-blok { background: var(--fos-light-surface); border: 1px solid var(--fos-light-border); border-radius: var(--fos-radius-lg); margin-bottom: 16px; overflow: hidden; box-shadow: var(--fos-shadow-xs); }
.FS-yrd-kart-blok-ust { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--fos-light-border); background: linear-gradient(120deg, rgba(249,115,22,.07), rgba(255,255,255,0) 60%); }
.FS-yrd-kart-blok-ust h2 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.FS-yrd-kart-blok-ust h2 i { color: var(--fos-orange); }
.FS-yrd-kart-blok-ust span { margin-left: auto; font-size: 11.5px; color: var(--fos-text-muted); }
html[dir="rtl"] .FS-yrd-kart-blok-ust span { margin-left: 0; margin-right: auto; }
.FS-yrd-kart-blok-govde { padding: 16px 18px 6px; font-size: 13.5px; line-height: 1.65; }
.FS-yrd-kart-blok-govde .FS-yrd-bolum { scroll-margin-top: calc(var(--fos-navbar-h) + 16px); }
.FS-yrd-detay-yok { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0 14px; color: var(--fos-text-secondary); }
.FS-yrd-detay-yok i { font-size: 18px; color: var(--fos-warning); }

/* Senaryolar */
.FS-yrd-senaryo { background: var(--fos-light-surface); border: 1px solid var(--fos-light-border); border-radius: var(--fos-radius-lg); padding: 18px 20px 12px; margin-bottom: 16px; scroll-margin-top: calc(var(--fos-navbar-h) + 16px); box-shadow: var(--fos-shadow-xs); }
.FS-yrd-senaryo-baslik { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.FS-yrd-senaryo-no { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: var(--fos-accent-grad); box-shadow: var(--fos-shadow-orange); }
.FS-yrd-senaryo-ekranlar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.FS-yrd-mini-baslik { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fos-text-muted); margin-right: 2px; }
.FS-yrd-dokunulmayan { margin: 6px 0 8px; padding: 12px 14px; border-radius: var(--fos-radius); background: #F8FAFC; border: 1px dashed #CBD5E1; }
.FS-yrd-dokunulmayan h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fos-text-secondary); }
.FS-yrd-dokunulmayan ul { margin: 0; padding-left: 18px; color: var(--fos-text-secondary); font-size: 13px; }
.FS-yrd-dokunulmayan li { margin-bottom: 4px; }
html[dir="rtl"] .FS-yrd-dokunulmayan ul { padding-left: 0; padding-right: 18px; }
.FS-yrd-icindekiler { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.FS-yrd-icindekiler a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--fos-radius); background: var(--fos-light-surface); border: 1px solid var(--fos-light-border); color: var(--fos-text-primary); text-decoration: none; font-size: 13px; font-weight: 600; }
.FS-yrd-icindekiler a:hover { border-color: rgba(249,115,22,.5); color: var(--fos-orange); }
.FS-yrd-icindekiler b { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--fos-orange); background: var(--fos-orange-muted); }

/* Kapsam */
.FS-yrd-kapsam-cubuk { height: 10px; border-radius: 6px; background: #E2E8F0; overflow: hidden; margin: 6px 0 4px; }
.FS-yrd-kapsam-cubuk > span { display: block; height: 100%; background: var(--fos-accent-grad); border-radius: 6px; }
.FS-yrd-dil-cip { display: inline-block; padding: 0 6px; margin: 0 2px 2px 0; border-radius: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; background: #F1F5F9; color: var(--fos-text-secondary); border: 1px solid #E2E8F0; }

/* ── KOYU TEMA ── */
body.fos-dark .FS-yrd-cekmece { background: var(--fos-dark-card); color: var(--fos-dark-text); box-shadow: -18px 0 48px rgba(0,0,0,.55); }
body.fos-dark .FS-yrd-perde { background: rgba(0,0,0,.55); }
body.fos-dark .FS-yrd-ust { border-color: var(--fos-dark-border); background: linear-gradient(120deg, rgba(249,115,22,.14) 0%, rgba(17,28,48,0) 70%); }
body.fos-dark .FS-yrd-ust-alt { color: var(--fos-dark-muted); }
body.fos-dark .FS-yrd-kapat { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); color: var(--fos-dark-text); }
body.fos-dark .FS-yrd-ayak { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); }
body.fos-dark .FS-yrd-ayak .fos-btn-secondary,
body.adm-body .FS-yrd-ayak .fos-btn-secondary { background: var(--fos-dark-card) !important; border-color: var(--fos-dark-border) !important; color: var(--fos-dark-text) !important; }
body.fos-dark .FS-yrd-kapat:hover, body.fos-dark .FS-yrd-kapat:focus-visible { background: rgba(249,115,22,.14); color: var(--fos-orange-end); border-color: rgba(249,115,22,.4); }
body.fos-dark .FS-yrd-iskelet span { background: linear-gradient(90deg, #172338 25%, #1E2D45 37%, #172338 63%); background-size: 400% 100%; }
body.fos-dark .FS-yrd-bos { color: var(--fos-dark-muted); }
body.fos-dark .FS-yrd-ozet { background: rgba(249,115,22,.12); }
body.fos-dark .FS-yrd-bolum-baslik { color: var(--fos-dark-muted); }
body.fos-dark .FS-yrd-tanim-satir { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); }
body.fos-dark .FS-yrd-tanim dd,
body.fos-dark .FS-yrd-sss-cevap { color: #A9B8CF; }
body.fos-dark .FS-yrd-alan { background: var(--fos-dark-card); color: var(--fos-dark-text); border-color: #2A3F5E; box-shadow: none; }
body.fos-dark .FS-yrd-sss details { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); }
body.fos-dark .FS-yrd-uyari { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.4); }
body.fos-dark .FS-yrd-ipucu { background: rgba(5,150,105,.12); border-color: rgba(5,150,105,.4); }
body.fos-dark .FS-yrd-oge { color: #FDBA74; background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.35); }
body.fos-dark .FS-yrd-bag { color: #93C5FD; background: rgba(37,99,235,.14); border-color: rgba(96,165,250,.35); }
body.fos-dark .FS-yrd-detay-baslik { border-color: var(--fos-dark-border); }
body.fos-dark .FS-yrd-ipucu-balon { background: var(--fos-dark-card); color: var(--fos-dark-text); border-color: var(--fos-dark-border); border-left-color: var(--fos-orange); }
body.fos-dark .FS-yrd-ipucu-balon::before { border-color: var(--fos-dark-border); }
body.fos-dark .FS-yrd-sayac-kutu,
body.fos-dark .FS-yrd-bas-kart,
body.fos-dark .FS-yrd-kart,
body.fos-dark .FS-yrd-yan-kart,
body.fos-dark .FS-yrd-kart-blok,
body.fos-dark .FS-yrd-senaryo,
body.fos-dark .FS-yrd-icindekiler a { background: var(--fos-dark-card); border-color: var(--fos-dark-border); color: var(--fos-dark-text); }
body.fos-dark .FS-yrd-sayac-deger,
body.fos-dark .FS-yrd-bas-kart:hover,
body.fos-dark .FS-yrd-kart:hover { color: var(--fos-dark-text); }
body.fos-dark .FS-yrd-sayac-etiket,
body.fos-dark .FS-yrd-bas-ozet,
body.fos-dark .FS-yrd-kart-ozet,
body.fos-dark .FS-yrd-durust,
body.fos-dark .FS-yrd-yol,
body.fos-dark .FS-yrd-detay-yok,
body.fos-dark .FS-yrd-bolum-ust h2 { color: var(--fos-dark-muted); }
body.fos-dark .FS-yrd-bolum-ust .FS-yrd-cizgi { background: var(--fos-dark-border); }
body.fos-dark .FS-yrd-yan-liste a { color: var(--fos-dark-text); }
body.fos-dark .FS-yrd-kart-blok-ust { border-color: var(--fos-dark-border); background: linear-gradient(120deg, rgba(249,115,22,.12), rgba(17,28,48,0) 60%); }
body.fos-dark .FS-yrd-rozet-kisa { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); color: var(--fos-dark-muted); }
body.fos-dark .FS-yrd-rozet-detay { background: rgba(5,150,105,.14); border-color: rgba(5,150,105,.4); color: #34D399; }
body.fos-dark .FS-yrd-rozet-senaryo { background: rgba(124,58,237,.16); border-color: rgba(167,139,250,.35); color: #C4B5FD; }
body.fos-dark .FS-yrd-dokunulmayan { background: var(--fos-dark-surface); border-color: #2A3F5E; }
body.fos-dark .FS-yrd-dokunulmayan h4,
body.fos-dark .FS-yrd-dokunulmayan ul { color: #A9B8CF; }
body.fos-dark .FS-yrd-kapsam-cubuk { background: var(--fos-dark-border); }
body.fos-dark .FS-yrd-dil-cip { background: var(--fos-dark-surface); border-color: var(--fos-dark-border); color: var(--fos-dark-muted); }
/* Admin paneli her zaman koyu — çekmece de koyu açılır */
body.adm-body .FS-yrd-cekmece { background: #111827; color: #E5E7EB; }
body.adm-body .FS-yrd-ust { border-color: #1F2937; }
body.adm-body .FS-yrd-ayak { background: #0B1220; border-color: #1F2937; }
body.adm-body .FS-yrd-tanim-satir,
body.adm-body .FS-yrd-sss details { background: #0B1220; border-color: #1F2937; }
body.adm-body .FS-yrd-alan { background: #111827; color: #E5E7EB; border-color: #374151; box-shadow: none; }
body.adm-body .FS-yrd-tanim dd,
body.adm-body .FS-yrd-sss-cevap,
body.adm-body .FS-yrd-bolum-baslik,
body.adm-body .FS-yrd-ust-alt { color: #9CA3AF; }
body.adm-body .FS-yrd-ozet { background: rgba(249,115,22,.12); }
body.adm-body .FS-yrd-kapat { background: #0B1220; border-color: #1F2937; color: #E5E7EB; }

/* ── MOBİL — çekmece alttan açılan sayfa ── */
@media (max-width: 768px) {
    .FS-yrd-cekmece,
    html[dir="rtl"] .FS-yrd-cekmece {
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; height: 88vh; height: 88dvh;
        border-radius: 18px 18px 0 0;
        transform: translateY(104%);
        box-shadow: 0 -12px 40px rgba(15,23,42,.28);
    }
    body.FS-yrd-acik .FS-yrd-cekmece { transform: none; }
    .FS-yrd-ust { padding: 18px 16px 12px; border-radius: 18px 18px 0 0; }
    /* Tutma çizgisi — alttan açılan sayfa olduğunu söyler */
    .FS-yrd-ust::after { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 3px; background: #CBD5E1; }
    .FS-yrd-ust::before { display: none; }
    .FS-yrd-govde { padding: 14px 16px 18px; font-size: 14px; }
    .FS-yrd-ayak { flex-direction: column; }
    .FS-yrd-ayak .fos-btn { width: 100%; padding: 10px; }
    .FS-yrd-ipucu-balon { width: 230px; right: -4px; }
    .FS-yrd-don { right: 12px; bottom: 14px; }
    .FS-yrd-btn-sabit { top: 10px; right: 10px; }

    .FS-yrd-hero { padding: 18px 16px; border-radius: var(--fos-radius-lg); }
    .FS-yrd-hero h1 { font-size: 19px; }
    .FS-yrd-hero h1 i { width: 34px; height: 34px; font-size: 17px; }
    .FS-yrd-ara { flex-direction: column; }
    .FS-yrd-ara .fos-btn { width: 100%; justify-content: center; }
    .FS-yrd-sayac { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
    .FS-yrd-sayac-kutu { flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px; }
    .FS-yrd-sayac-kutu > i { width: 30px; height: 30px; font-size: 15px; }
    .FS-yrd-sayac-deger { font-size: 19px; }
    .FS-yrd-baslangic { grid-template-columns: 1fr; }
    .FS-yrd-izgara { grid-template-columns: 1fr; }
    .FS-yrd-duzen { grid-template-columns: 1fr; }
    .FS-yrd-yan { position: static; order: -1; }
    .FS-yrd-ekran-baslik h1 { font-size: 19px; }
    .FS-yrd-kart-blok-govde { padding: 14px 14px 4px; }
    .FS-yrd-senaryo { padding: 15px 14px 10px; }
    .FS-yrd-senaryo-baslik { font-size: 15px; }
    .FS-yrd-icindekiler { grid-template-columns: 1fr; }
}
body.fos-dark .FS-yrd-ust::after { background: #2A3F5E; }

/* Dar telefonda üst çubuk taşmasın: (?) düğmesi geldi — kullanıcı adı gizlenir, avatar + fuar rozeti kalır */
@media (max-width: 480px) {
    .fos-user-menu-ad { display: none; }
    .fos-navbar-right { gap: 8px; }
}

/* ── UYGULAMA HİSSİ — zoom yok, arka plan kaymaz, dokunma gecikmesi/vurgusu yok ── */
body.FS-yrd-acik { overflow: hidden; }
.FS-yrd-btn, .FS-yrd-cekmece, .FS-yrd-cekmece button, .FS-yrd-cekmece a, .FS-yrd-don,
.FS-yrd-kart, .FS-yrd-bas-kart, .FS-yrd-sss summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.FS-yrd-cekmece { -webkit-user-select: text; user-select: text; }
@media (max-width: 768px) {
    /* iOS 16px altındaki kutuya odaklanınca ekranı büyütür — yazı 16px */
    .FS-yrd-ara-kutu input { font-size: 16px; }
    /* Parmak hedefi en az 40px */
    .FS-yrd-btn { width: 38px; height: 38px; font-size: 17px; }
    .FS-yrd-kapat { width: 40px; height: 40px; }
    .FS-yrd-sss summary { padding: 13px 12px; }
    .FS-yrd-goster { padding: 5px 10px; font-size: 12px; }
    /* Arka plan sayfası çekmece açıkken yerinde durur (iOS lastik kaydırması dahil) */
    body.FS-yrd-acik { position: fixed; left: 0; right: 0; width: 100%; }
    /* Parmakla sürüklerken geçiş animasyonu kapanır — parmağı birebir izler */
    .FS-yrd-cekmece.FS-yrd-surukle { transition: none; }
    .FS-yrd-ust { touch-action: none; cursor: grab; }
}

/* ── BASKI — yardım sayfası kağıda düz basılır; çekmece ve düğmeler basılmaz ── */
@media print {
    .FS-yrd-cekmece, .FS-yrd-perde, .FS-yrd-btn-wrap, .FS-yrd-don, .FS-yrd-goster, .FS-yrd-ara, .FS-yrd-yan { display: none !important; }
    .FS-yrd-duzen { grid-template-columns: 1fr; }
    .FS-yrd-hero { background: none !important; color: #000 !important; box-shadow: none !important; padding: 0 !important; }
    .FS-yrd-hero h1 { color: #000 !important; }
    .FS-yrd-sss details { break-inside: avoid; }
    .FS-yrd-senaryo, .FS-yrd-kart-blok { break-inside: auto; box-shadow: none !important; }
}