*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --sb-bg:      #ffffff;
    --sb-bg-deep: #f7f8fc;
    --sb-user-bg: #fafbff;
    --sb-hover:   #eef1f8;
    --sb-active:  rgba(79, 110, 247, 0.1);
    --sb-border:  #e0e4ef;
    --sb-text:    #64748b;
    --sb-text-hi: #1a1d2e;
    --sb-width:   240px;
    --sb-width-collapsed: 76px;
    --sb-width-hover: 272px;
    --top-h:      70px; /* logo bandı ile aynı yükseklik */
    --accent:     #4f6ef7;
    --accent-hover: #3f5fe8;
    --accent-soft:  #f0f4ff;
    --accent-muted: #c7d4fe;
    --primary:    var(--accent);
    --danger:     #e53935;
    --warn:       #fb8c00;
    --success:    #43a047;
    --wa:         #128c7e;
    --wa-hover:   #0b6b5c;
    --wa-soft:    color-mix(in srgb, var(--wa) 10%, var(--surface));
    --bg:         #f0f2f7;
    --surface:    #ffffff;
    --border:     #e0e4ef;
    --text:       #1a1d2e;
    --muted:      #6b7280;
    --panel-head-bg: #fafbff;
    --table-head-bg: #f8f9fc;
    --table-row-hover: #f8faff;
    --table-row-border: #f1f5f9;
    --input-bg:   #ffffff;
    --input-focus-ring: rgba(79, 110, 247, 0.18);
    --statusbar-bg: #e9ecf3;
    --shadow-sm:  0 1px 3px rgba(26, 29, 46, 0.06);
    --shadow-md:  0 4px 16px rgba(26, 29, 46, 0.08);
    --radius-sm:  6px;
    --radius-md:  8px;
    /* Form sistemi — Kursiyer Kart Genel Bilgiler baz */
    --form-label-fs: 11px;
    --form-label-h: 16px;
    --form-input-h: 36px;
    --form-input-fs: 13px;
    --form-gap-y: 12px;
    --form-gap-x: 16px;
    --form-field-gap: 4px;
}

html, body { height:100%; overflow:hidden; }
body { font-family:"Roboto", sans-serif; background:var(--bg); color:var(--text); display:flex; flex-direction:column; }

.app-wrap { display:flex; flex:1; overflow:hidden; }

.sidebar {
    width: var(--sb-width);
    background: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-deep) 100%);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--sb-border);
    box-shadow: 1px 0 0 rgba(79, 110, 247, 0.04);
    transition: width 0.22s ease, box-shadow 0.22s ease;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.sb-logo {
    height: var(--top-h);
    padding: 0 14px;
    display: flex; align-items: center; gap: 11px;
    border-bottom: 1px solid var(--sb-border);
    background: var(--sb-bg);
    flex-shrink: 0;
    box-sizing: border-box;
}
.sb-logo-img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    max-height: calc(var(--top-h) - 12px);
    object-fit: contain;
    object-position: left center;
    image-rendering: auto;
}
.sb-logo-img--mark { display: none; }

.sb-user {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--sb-border);
    background: var(--sb-user-bg);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}
.sb-user-av {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(145deg, #5b7cff 0%, var(--accent) 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    flex-shrink: 0;
    line-height: 1;
    text-align: center;
}
.sb-user-info {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.sb-user-name { font-size: 13px; font-weight: 600; color: var(--sb-text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-exit {
    margin-left: auto;
    flex-shrink: 0;
    --sw-link: #c62828;
    --sw-link-hover: #b91c1c;
    font-size: 13px; cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
}

.sb-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sb-footer {
    flex-shrink: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--sb-border);
    background: var(--sb-user-bg);
}

.sb-footer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 7px;
    --sw-link: var(--sb-text-hi);
    --sw-link-hover: var(--accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.sb-footer-link:hover {
    background: var(--sb-hover);
}

.sb-footer-link i {
    color: var(--accent);
    width: 16px;
    text-align: center;
}

.sb-group { border-bottom: 1px solid var(--sb-border); }

.sb-group-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    color: var(--sb-text);
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.sb-group-hdr:hover { background: var(--sb-hover); color: var(--sb-text-hi); }
.sb-group-hdr.open {
    color: var(--sb-text-hi);
    background: var(--accent-soft);
}
.sb-group-lbl { display: flex; align-items: center; gap: 10px; }
.sb-group-lbl > i {
    font-size: 15px; width: 18px; text-align: center;
    color: var(--accent);
}
.sb-group-hdr.open .sb-group-lbl > i { color: #3f5fe8; }
.sb-arrow { font-size: 10px; transition: transform 0.2s; opacity: 0.7; }
.sb-group-hdr.open .sb-arrow { transform: rotate(90deg); opacity: 1; }

.sb-sub { display: none; }
.sb-sub.open { display: block; padding-bottom: 4px; }

.sb-sub-hdr {
    padding: 10px 14px 4px 40px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    user-select: none;
}
.sb-sub-hdr:not(:first-child) {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--sb-border);
}

.sb-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px 8px 40px;
    --sw-link: var(--sb-text);
    --sw-link-hover: var(--sb-text-hi);
    font-size: 13px; font-weight: 500; text-decoration: none;
    transition: all 0.12s;
    border-left: 3px solid transparent;
}
.sb-item:hover {
    background: var(--sb-hover);
}
.sb-item.active {
    --sw-link: #2f3f9e;
    --sw-link-hover: #2f3f9e;
    background: var(--sb-active);
    border-left-color: var(--accent);
    font-weight: 600;
}
.sb-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #cbd5e1; flex-shrink: 0;
}
.sb-item.active .sb-dot { background: var(--accent); box-shadow: 0 0 0 2px rgba(79, 110, 247, 0.2); }

.sb-badge {
    margin-left: auto;
    background: var(--danger); color: #fff;
    font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 8px; min-width:16px; text-align:center;
}

.main-col {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
}

.topbar {
    height: var(--top-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 20px; gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
}
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }

.topbar-conn {
    flex-wrap: nowrap;
    gap: 6px;
    margin-right: 18px;
}

.topbar-conn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    border-width: 1.5px;
    box-shadow: var(--shadow-sm);
}

.topbar-conn-btn .sw-conn-dot,
.topbar-conn-btn .sw-conn-meta {
    display: none;
}

.topbar-conn-btn[data-tone="ok"] {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    --sw-link: var(--success);
    --sw-link-hover: #fff;
}

.topbar-conn-btn[data-tone="warn"] {
    color: color-mix(in srgb, var(--warn) 80%, #000);
    background: color-mix(in srgb, var(--warn) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--warn) 42%, var(--border));
    --sw-link: color-mix(in srgb, var(--warn) 80%, #000);
    --sw-link-hover: #fff;
}

/* Kapalı / hazır değil — nötr gri (pembe/kırmızı agresif ton yok) */
.topbar-conn-btn[data-tone="danger"],
.topbar-conn-btn[data-tone="muted"] {
    color: var(--muted);
    background: var(--panel-head-bg);
    border-color: var(--border);
    --sw-link: var(--muted);
    --sw-link-hover: var(--text);
}

/* WhatsApp — açıkken kanal yeşili (--wa); kapalı topbar ile aynı nötr dil */
.topbar-conn-btn--wa[data-tone="ok"] {
    color: var(--wa);
    background: var(--wa-soft);
    border-color: color-mix(in srgb, var(--wa) 45%, var(--border));
    --sw-link: var(--wa);
    --sw-link-hover: #fff;
}

.topbar-conn-btn[data-tone="ok"]:hover {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.topbar-conn-btn--wa[data-tone="ok"]:hover {
    background: var(--wa);
    border-color: var(--wa-hover);
    color: #fff;
}

.topbar-conn-btn[data-tone="warn"]:hover {
    background: var(--warn);
    border-color: var(--warn);
    color: #fff;
}

.topbar-conn-btn[data-tone="danger"]:hover,
.topbar-conn-btn[data-tone="muted"]:hover {
    background: var(--sb-hover);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    color: var(--text);
}

.topbar-conn-flash {
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 60;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

.topbar-conn-flash.u-hidden {
    display: none !important;
}

/* Kaydedildi vb. — her sayfada aynı yer (üst bar ortası), flex’ten bağımsız */
.topbar-toast {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(360px, calc(100% - 28rem));
    pointer-events: none;
}
.topbar-toast:not(:has(.topbar-alert)) {
    display: none;
}
.topbar-alert {
    pointer-events: auto;
    width: max-content;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-sm);
    transition: opacity 0.35s ease;
}
.topbar-alert--dismissed { opacity: 0; pointer-events: none; }
.topbar-alert i { flex-shrink: 0; }
.topbar-alert--success {
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
}
.topbar-alert--warn {
    background: color-mix(in srgb, var(--warn) 14%, var(--surface));
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
}
.topbar-alert--error {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
}

.topbar-date  { font-size:11px; color:var(--muted); }
.topbar-notif {
    width:30px; height:30px; border:1px solid var(--border); border-radius:6px;
    background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--muted); font-size:13px; position:relative;
    transition: background .15s, border-color .15s, color .15s;
}
.topbar-notif:hover {
    background: var(--accent-soft); border-color: var(--accent-muted); color: var(--accent);
}
.notif-dot { position:absolute; top:5px; right:5px; width:6px; height:6px; background:var(--danger); border-radius:50%; border:1.5px solid #fff; }

.content {
    flex:1; overflow-y:auto; padding:18px 20px; background:var(--bg);
}
.content:has(.kart-page) {
    padding-top: 0;
    overflow-x: auto;
}
.content::-webkit-scrollbar { width:5px; }
.content::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:10px; }

.statusbar {
    height: 22px;
    background: var(--statusbar-bg);
    display: flex; align-items: center; padding: 0 14px; gap: 16px;
    font-size: 10px; color: var(--muted); flex-shrink: 0;
    border-top: 1px solid var(--border);
}
.sb-online {
    color: var(--success);
    display: flex;
    align-items: center;
    font-size: 11px;
}
.sb-wa {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
}
.sb-wa[data-durum="bagli"] { color: var(--success); }
.sb-wa[data-durum="kayitli"] { color: var(--warn); }
.sb-wa[data-durum="kapali"],
.sb-wa[data-bagli="0"] { color: var(--danger); }
.sb-mebbis {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
}
.sb-mebbis[data-durum="hazir"] { color: var(--success); }
.sb-mebbis[data-durum="aciliyor"],
.sb-mebbis[data-durum="mesgul"] { color: var(--warn); }
.sb-mebbis[data-durum="kapali"],
.sb-mebbis[data-hazir="0"]:not([data-durum="aciliyor"]):not([data-durum="mesgul"]) { color: var(--danger); }
.statusbar-r { margin-left:auto; display:flex; gap:14px; }

.icon-spaced { margin-right:4px; }
.icon-xs { font-size:7px; }

/* ── Link renk tutarlılığı (anayasa) ──
   Ana içerik + sidebar ayrı; ziyaret (:visited) moru yok. */
.content a:not(.btn) {
    --sw-link: var(--accent);
    --sw-link-hover: var(--accent-hover);
}

.content a:not(.btn):link,
.content a:not(.btn):visited,
.content a:not(.btn):active {
    color: var(--sw-link);
}

.content a:not(.btn):hover {
    color: var(--sw-link-hover);
}

.sidebar a:link,
.sidebar a:visited,
.sidebar a:active {
    color: var(--sw-link);
}

.sidebar a:hover {
    color: var(--sw-link-hover);
}