/* ==========================================================================
   CarboNET — Modern UI Skin (Bootstrap 5)
   UI-TASARIM-MIGRATION.md tasarım sistemi + BS3→BS5 köprüsü (legacy içerik için)
   ========================================================================== */

/* ====== TASARIM TOKEN'LARI ====== */
:root {
    --primary-color: #2c3e50;
    --success-color: #27ae60;
    --danger-color:  #e74c3c;
    --warning-color: #f39c12;
    --info-color:    #3498db;
    --muted-color:   #95a5a6;

    --brand:      #16a34a;                 /* CarboNET yeşil */
    --brand-2:    #22c55e;
    --brand-grad: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    --ink:        #1f2937;
    --ink-soft:   #6b7280;
    --bg-app:     #f3f6f5;
    --card:       #ffffff;
    --line:       #eaeef0;
    --brand-shadow: rgba(22,163,74,.20);
}

/* ====== TEMEL ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg-app);
    color: var(--ink);
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
a { text-decoration: none; }

/* ====== TAM EKRAN YÜKLEME KATMANI ====== */
#loadingOverlay {
    display: none; position: fixed; inset: 0;
    background: rgba(255,255,255,0.7); z-index: 9999;
    justify-content: center; align-items: center; backdrop-filter: blur(2px);
}
#loadingOverlay.active { display: flex !important; }
.loader-content { text-align: center; background: #fff; padding: 2rem 3rem; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); }
.loader-spinner {
    width: 48px; height: 48px; border: 4px solid #e9ecef; border-top: 4px solid var(--brand);
    border-radius: 50%; animation: cnspin 0.8s linear infinite; margin: 0 auto 1rem;
}
@keyframes cnspin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loader-text { color: var(--primary-color); font-weight: 500; font-size: 0.95rem; }

/* ====== APP SHELL ====== */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    width: 256px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; padding: 16px 12px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 100;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; overflow: hidden; }
.sidebar-brand .brand-logo { height: 30px; max-width: 100%; object-fit: contain; }
.sidebar-brand .brand-text { font-weight: 800; font-size: 1.15rem; letter-spacing: -.3px; color: var(--ink); }
.sidebar-brand .brand-text b { color: var(--brand); }

.sidebar-user {
    display: flex; align-items: center; gap: 10px; background: #f4faf6;
    border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 14px;
}
.sidebar-user img.su-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.su-avatar-fallback { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; text-transform: uppercase; }
.su-meta { min-width: 0; }
.su-name { font-weight: 700; font-size: .86rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.su-role { font-size: .72rem; color: var(--ink-soft); text-transform: capitalize; }

.sidebar-section-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; color: #9aa3a0;
    padding: 12px 10px 6px; font-weight: 700; }

/* ---- Sidebar menü (legacy _ustmenu.php: ul>li>a yapısı) ---- */
.app-sidebar nav { flex: 1; }
.app-sidebar nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.app-sidebar nav ul ul { margin: 2px 0 4px 0; padding-left: 0; }
.app-sidebar nav li { position: relative; }
.app-sidebar nav a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px;
    color: var(--ink-soft); font-weight: 600; font-size: .88rem; transition: all .15s; cursor: pointer;
}
.app-sidebar nav a:hover { background: #eefaf1; color: var(--brand); }
.app-sidebar nav a.cn-active { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 18px var(--brand-shadow); }
/* hexagon kısaltma rozeti */
.nav-icon-hexa {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
    background: #eaf6ee; color: var(--brand); font-size: .68rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; text-transform: none;
}
.app-sidebar nav a:hover .nav-icon-hexa { background: #d9f0e0; }
.app-sidebar nav a.cn-active .nav-icon-hexa { background: rgba(255,255,255,.22); color: #fff; }
/* FA ikon rozeti (DB Simge) */
.nav-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; background: #eaf6ee; color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center; font-size: .92rem; }
.app-sidebar nav a:hover .nav-icon { background: #d9f0e0; }
.app-sidebar nav a.cn-active .nav-icon { background: rgba(255,255,255,.22); color: #fff; }
/* alt menüler: üst menü (href="#") açılır-kapanır */
.app-sidebar nav > ul > li > ul { display: none; padding-left: 14px; border-left: 2px solid var(--line); margin-left: 18px; }
.app-sidebar nav > ul > li.cn-open > ul { display: block; }
.app-sidebar nav > ul > li > a[href="#"]::after,
.app-sidebar nav li > a.cn-has-children::after {
    content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; font-size: .7rem; transition: transform .2s; color: #b9c2bd;
}
.app-sidebar nav > ul > li.cn-open > a::after { transform: rotate(90deg); }

.sidebar-footer { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; }
.sidebar-footer a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px;
    color: var(--ink-soft); font-weight: 600; font-size: .88rem; }
.sidebar-footer a:hover { background: #fff0f0; color: var(--danger-color); }

/* ====== ANA İÇERİK ====== */
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
    display: flex; align-items: center; gap: 14px; padding: 12px 22px;
    background: rgba(255,255,255,.8); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50;
}
.topbar-toggle { display: none; background: none; border: none; font-size: 1.4rem; color: var(--ink); cursor: pointer; }
.topbar-title { font-size: 1.25rem; font-weight: 800; margin: 0; letter-spacing: -.4px; color: var(--ink); }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-user { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.topbar-user img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.topbar-icon-btn {
    width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: #fff;
    color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; transition: all .15s;
}
.topbar-icon-btn:hover { background: #eefaf1; color: var(--brand); border-color: #cfe9d8; }

.app-content { padding: 20px 22px 40px; flex: 1; }

/* iki kolonlu düzen: müşteri paneli + orta içerik */
.cn-layout { display: flex; gap: 18px; align-items: flex-start; }
.cn-cust-panel { width: 290px; flex-shrink: 0; }
.cn-main-col { flex: 1; min-width: 0; }

/* ====== KART ====== */
.cn-card, .content-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 1px 3px rgba(20,40,30,.05); padding: 16px; margin-bottom: 16px;
}
.cn-card-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: #9aa3a0; font-weight: 800; margin-bottom: 10px; }

/* müşteri arama kutusu */
.cn-cust-search { display: flex; gap: 6px; margin-bottom: 10px; }
.cn-cust-search .input-group { border-radius: 12px; }

/* ====== MÜŞTERİ LİSTESİ TABLOSU ====== */
#DivMusteriListesi { max-height: 64vh; overflow-y: auto; }
#DivMusteriListesi table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
#DivMusteriListesi table td { padding: 9px 12px; background: #fff; border: 1px solid var(--line); font-size: .82rem; }
#DivMusteriListesi table tr td:first-child { border-radius: 10px 0 0 10px; border-right: none; }
#DivMusteriListesi table tr td:last-child { border-radius: 0 10px 10px 0; border-left: none; text-align: center; }
#DivMusteriListesi table tr:hover td { background: #f4faf6; cursor: pointer; }

/* ==========================================================================
   BS3 → BS5 KÖPRÜSÜ  (legacy markup migre edilene kadar temiz görünsün)
   ========================================================================== */

/* ---- portlet → kart ---- */
.portlet { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(20,40,30,.05); overflow: hidden; margin-bottom: 16px; }
.portlet-header { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line);
    font-weight: 700; font-size: 1rem; color: var(--ink); background: #fff; }
.portlet-header .fa { color: var(--brand); }
.portlet-content { padding: 14px 16px; }
.portlet-footer { padding: 14px 16px; border-top: 1px solid var(--line); background: #fbfdfc;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-radius: 0 0 12px 12px; }
.portlet-footer a { display: inline-flex; }
/* Form aksiyon butonlari (footer'siz formlarda da alt/üst boşluk) */
form .portlet-content > .btn:last-child,
.panel-body > form > .btn, .panel-body > .btn { margin-top: 8px; }
/* checkbox/icheck satiri boşluk */
.form-group { margin-bottom: 1rem; }
.icheckbox_square-green, .iradio_square-green { margin-right: 6px; }

/* ---- tablolar ---- */
.table { width: 100%; margin-bottom: 0; color: var(--ink); border-collapse: collapse; }
.table th, .table td { padding: 9px 12px; vertical-align: middle; }
.table.table-condensed th, .table.table-condensed td { padding: 6px 10px; font-size: .85rem; }
.table thead th { background: #f6f8f7; border-bottom: 2px solid #e2e8e5 !important; font-weight: 700; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .3px; color: #6c757d; white-space: nowrap; }
.table.table-bordered, .table.table-bordered th, .table.table-bordered td { border: 1px solid var(--line); }
.table.table-striped tbody tr:nth-child(odd) { background: #fbfdfc; }
.table.table-hover tbody tr:hover { background: #eefaf1 !important; }

/* ---- butonlar (BS3 isimleri) ---- */
.btn { border-radius: 8px; font-weight: 600; font-size: .83rem; padding: .44rem .85rem; border: 1px solid transparent; transition: all .14s ease; cursor: pointer; line-height: 1.35; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { filter: brightness(.97); }
.btn-xs { padding: .26rem .5rem; font-size: .74rem; border-radius: 7px; gap: 4px; }
.btn-sm { padding: .32rem .62rem; font-size: .79rem; }
.btn-lg { padding: .6rem 1.2rem; font-size: 1rem; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); color: #fff; box-shadow: 0 3px 10px var(--brand-shadow); filter: none; }
.btn-success { background: var(--success-color); color: #fff; }
.btn-success:hover { background: #229954; color: #fff; filter: none; }
.btn-danger { background: var(--danger-color); color: #fff; }
.btn-danger:hover { background: #cf4436; color: #fff; filter: none; }
.btn-warning { background: var(--warning-color); color: #fff; }
.btn-info { background: var(--info-color); color: #fff; }
.btn-default, .btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-default:hover, .btn-secondary:hover { background: #f1f5f3; color: var(--ink); }
.btn-link { background: none; color: var(--brand); border: none; }
.btn-block { display: block; width: 100%; }

/* ---- form kontrolleri ---- */
.form-control, .form-select { display: block; width: 100%; padding: .45rem .75rem; font-size: .88rem; line-height: 1.4;
    color: var(--ink); background: #fff; border: 1px solid #dfe5e2; border-radius: 9px; transition: border-color .15s, box-shadow .15s; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,163,74,.12); outline: none; }
.input-sm, .form-control.input-sm { padding: .3rem .55rem; font-size: .8rem; border-radius: 8px; }
.input-lg { padding: .6rem .9rem; font-size: 1rem; }
.form-group { margin-bottom: 1rem; }
label { font-weight: 600; font-size: .82rem; color: var(--ink); margin-bottom: .25rem; }
.help-block { font-size: .78rem; color: var(--ink-soft); margin-top: .25rem; }
textarea.form-control { min-height: 80px; }

/* input-group (BS3/BS5 ortak) */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; }
.input-group .input-group-btn > .btn, .input-group .btn { border-radius: 0 9px 9px 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---- label/badge ---- */
.label, .badge { display: inline-block; padding: .3em .6em; font-size: .72em; font-weight: 700; border-radius: 6px; line-height: 1; color: #fff; }
.label-default, .badge-default { background: var(--muted-color); }
.label-primary { background: var(--brand); }
.label-success, .badge-success { background: var(--success-color); }
.label-danger, .badge-danger { background: var(--danger-color); }
.label-warning, .badge-warning { background: var(--warning-color); color: #fff; }
.label-info, .badge-info { background: var(--info-color); }

/* ---- yardımcılar (BS3) ---- */
.pull-right, .float-end { float: right !important; }
.pull-left, .float-start { float: left !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--ink-soft) !important; }
.hidden { display: none !important; }
.clearfix::after { content: ""; display: table; clear: both; }

/* BS3 grid'i koru (BS5'te col-xs yok) */
[class*="col-xs-"] { float: left; position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
.col-xs-1{width:8.333%}.col-xs-2{width:16.66%}.col-xs-3{width:25%}.col-xs-4{width:33.33%}.col-xs-5{width:41.66%}.col-xs-6{width:50%}
.col-xs-7{width:58.33%}.col-xs-8{width:66.66%}.col-xs-9{width:75%}.col-xs-10{width:83.33%}.col-xs-11{width:91.66%}.col-xs-12{width:100%}

/* ---- empty / boş durum ---- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted-color); }
.empty-state i { font-size: 3rem; margin-bottom: 1rem; display: block; }

/* ---- BS3 nav-tabs (li.active) köprüsü ---- */
.nav-tabs { border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; list-style: none; padding-left: 0; margin: 0 0 14px; gap: 4px; }
.nav-tabs > li { margin-bottom: -1px; }
.nav-tabs > li > a { display: inline-block; padding: 9px 16px; border: 1px solid transparent; border-radius: 11px 11px 0 0; color: var(--ink-soft); font-weight: 600; font-size: .88rem; cursor: pointer; }
.nav-tabs > li > a:hover { background: #f4faf6; color: var(--brand); }
.nav-tabs > li.active > a { background: #fff; border-color: var(--line) var(--line) #fff; color: var(--brand); }

/* ---- modal yuvarlatma ---- */
.modal-content { border: none; border-radius: 16px; }

/* ====== CHOSEN restyle (BS5 görünümü) ====== */
.chosen-container { font-size: .85rem; }
.chosen-container-single .chosen-single { height: 34px; line-height: 34px; border: 1px solid #dfe5e2 !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important; padding: 0 .55rem; }
.chosen-container-active .chosen-single { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important; }
.chosen-container .chosen-results li.highlighted { background: var(--brand-grad) !important; }
.chosen-container-multi .chosen-choices { border: 1px solid #dfe5e2 !important; border-radius: 8px !important; }
.chosen-container-multi .chosen-choices li.search-choice { background: #eaf6ee !important; border-color: #cfe9d8 !important; color: var(--brand); border-radius: 6px; }

/* ====== DASHBOARD WIDGET'LARI (Boooya markup → modern stat kartı) ====== */
.app-feature-gallery { list-style: none; padding: 0; margin: 0; height: auto !important; }
.app-feature-gallery > li { margin-bottom: 16px; }
.app-widget-tile {
    background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
    box-shadow: 0 4px 18px rgba(40,80,60,.05); transition: transform .15s, box-shadow .15s;
}
.app-widget-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(40,80,60,.12); }
.app-widget-tile .icon.icon-lg {
    width: 50px; height: 50px; border-radius: 14px; background: var(--brand-grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.app-widget-tile .icon.icon-lg [class^="icon-"], .app-widget-tile .icon.icon-lg [class*=" icon-"] { line-height: 1; }
.app-widget-tile .icon.icon-lg [class^="icon-"]::before, .app-widget-tile .icon.icon-lg [class*=" icon-"]::before {
    font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; speak: none;
}
.app-widget-tile .icon-bubble::before   { content: "\f249"; }   /* chat */
.app-widget-tile .icon-envelope::before { content: "\f32c"; }
.app-widget-tile .icon-users::before    { content: "\f4cf"; }   /* people */
.app-widget-tile .icon-database::before { content: "\f410"; }   /* hdd-stack */
.app-widget-tile .icon-inbox::before    { content: "\f42c"; }
.app-widget-tile .icon-cloud::before    { content: "\f29e"; }
.app-widget-tile .icon-calendar::before { content: "\f1e7"; }
.app-widget-tile .icon-heart::before    { content: "\f415"; }
.app-widget-tile .icon-warning::before  { content: "\f33a"; }   /* exclamation-triangle */
.app-widget-tile .intval { font-size: 1.75rem; font-weight: 800; color: var(--ink); line-height: 1.1; margin: 4px 0; }
.app-widget-tile .title { font-weight: 700; font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .3px; }
.app-widget-tile .subtitle { font-size: .76rem; color: var(--ink-soft); }
.app-widget-tile .subtitle a { color: var(--brand); }
.app-widget-tile .line { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

/* ==========================================================================
   DASHBOARD (modern, grafikli, animasyonlu)
   ========================================================================== */
.cn-dash { animation: cnFadeIn .3s ease; }
.cn-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.cn-kpi {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 14px;
    box-shadow: 0 1px 3px rgba(20,40,30,.05); overflow: hidden; display: flex; flex-direction: column; gap: 8px;
    animation: cnFloatIn .4s ease both;
}
.cn-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--c), var(--c2)); }
.cn-kpi:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(30,50,40,.12); }
.cn-kpi-ic { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 6px 14px rgba(20,40,30,.18); }
.cn-kpi-num { font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1.05; letter-spacing: -.5px; }
.cn-kpi-lbl { font-size: .8rem; color: var(--ink-soft); font-weight: 600; margin-top: 2px; }
.cn-kpi-link, .cn-kpi-chip { font-size: .74rem; font-weight: 700; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; }
.cn-kpi-link { color: var(--c); text-decoration: none; }
.cn-kpi-link:hover { gap: 8px; }
.cn-kpi:nth-child(2){animation-delay:.05s} .cn-kpi:nth-child(3){animation-delay:.1s} .cn-kpi:nth-child(4){animation-delay:.15s}

.cn-dash-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.cn-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 3px rgba(20,40,30,.05);
    display: flex; flex-direction: column; min-width: 0; overflow: hidden; animation: cnFloatIn .4s ease both; }
.cn-panel-1 { flex: 1 1 280px; }
.cn-panel-2 { flex: 2 1 480px; }
.cn-panel-head { padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .85rem; color: var(--ink); display: flex; align-items: center; justify-content: space-between; }
.cn-panel-head i { color: var(--brand); margin-right: 7px; }
.cn-panel-body { padding: 14px; flex: 1; position: relative; }
/* grafik panelleri kompakt SABİT küçük yükseklik (naif, az yer) */
.cn-dash .cn-chartbox { height: 158px !important; flex: 0 0 auto !important; padding: 10px 12px; }
.cn-dash .cn-chartbox > canvas { width: 100% !important; height: 100% !important; display: block; }

.cn-activity { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.cn-act-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; transition: background .15s; animation: cnFloatIn .4s ease both; }
.cn-act-item:hover { background: #f5f9f7; }
.cn-act-ic { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.cn-act-main { flex: 1; min-width: 0; }
.cn-act-t { font-size: .84rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-act-tag { font-size: .68rem; background: #eef2f0; color: #6b7280; border-radius: 5px; padding: 1px 6px; font-weight: 600; }
.cn-act-d { font-size: .76rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.cn-act-time { font-size: .7rem; color: #9aa3a0; white-space: nowrap; flex-shrink: 0; }
.cn-pill { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.cn-pill-on { background: #d1fae5; color: #047857; }
.cn-pill-off { background: #fef3c7; color: #b45309; }
.cn-empty { text-align: center; color: var(--muted-color); padding: 24px; font-size: .85rem; }

@media (max-width: 1200px) { .cn-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cn-kpi-grid { grid-template-columns: 1fr; } }

/* ====== TOAST (toastr ile uyumlu konteyner) ====== */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 10000; }

/* ==========================================================================
   MODERN POLISH — pagination, animasyon, ikon buton, başlık, tablo
   ========================================================================== */

/* ---- Modern pagination (BS3 .pagination > li > a) ---- */
.pagination { display: inline-flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0; align-items: center; }
.pagination > li { display: inline-flex; }
.pagination > li > a, .pagination > li > span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
    padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft);
    background: #fff; font-weight: 600; font-size: .82rem; text-decoration: none; transition: all .15s; line-height: 1;
}
.pagination > li > a:hover { background: var(--brand-grad); color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 4px 12px var(--brand-shadow); }
.pagination > li.disabled > a { color: var(--ink); background: #f4faf6; cursor: default; font-weight: 700; }
.pagination > li.disabled > a:hover { transform: none; box-shadow: none; background: #f4faf6; color: var(--ink); }
.pagination > li.active > a { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px var(--brand-shadow); }

/* ---- Animasyonlar ---- */
@keyframes cnFloatIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cnFadeIn  { from { opacity: 0; } to { opacity: 1; } }
#DivOrta > * , .portlet, .cn-card, .content-card { animation: cnFloatIn .32s ease both; }
.app-content { animation: cnFadeIn .25s ease both; }
.table tbody tr { transition: background-color .15s, box-shadow .15s; }
.table.table-hover tbody tr:hover { box-shadow: inset 3px 0 0 var(--brand); }
.btn { transition: transform .12s, box-shadow .12s, background .15s, color .15s; }

/* ---- Aksiyon butonları (tablo içi ikonlu) ---- */
.table td .btn-xs, .table td .btn-sm { min-width: 32px; }
.table td .btn-xs i, .table td .btn-sm i { font-size: .85rem; }
.table td a + a, .table td .btn + .btn { margin-left: 3px; }
.btn:active { transform: translateY(0); }

/* ---- Portlet başlığı + ikon ---- */
.portlet-header h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.3px; }
.portlet-header h3 .fa, .portlet-header h3 .bi {
    font-size: .85rem; color: var(--brand); background: #eef7f1; width: 32px; height: 32px;
    border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---- Excel / üst aksiyon linkleri ---- */
.table thead a[href*="xls"], .table thead a[target="_blank"] {
    display: inline-flex; align-items: center; gap: 6px; color: var(--success-color); font-weight: 700; font-size: .82rem; text-decoration: none;
}
.table thead a[href*="xls"]:hover { color: #1e8e4f; }

/* ---- Filtre satırı inputları ---- */
.table thead .form-control.input-sm { height: 34px; }

/* ---- İçerik yatay taşma koruması (geniş tablolar) ---- */
.portlet-content { overflow-x: auto; }
.portlet-content > .table, .portlet-content > form > .table, .portlet-content .table { width: auto; min-width: 100%; }
.cn-main-col { min-width: 0; }

/* ---- Müşteri paneli daraltma ---- */
.app-shell.cn-hide-cust .cn-cust-panel { display: none; }
#cnCustToggle { flex-shrink: 0; }
.app-shell.cn-hide-cust #cnCustToggle { background: var(--brand-grad); color: #fff; border-color: transparent; }
@media (max-width: 992px) { #cnCustToggle { display: none; } }

/* ==========================================================================
   DESIGN PASS 3 — panel köprüsü, modern loader, collapse animasyon
   ========================================================================== */

/* ---- BS3 .panel köprüsü — RAFİNE hafif section header (ağır renkli bar değil) ---- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(20,40,30,.05); margin-bottom: 16px; overflow: hidden; }
.panel-heading { padding: 11px 14px; font-weight: 700; font-size: .82rem; color: var(--ink); background: #fff; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 9px; letter-spacing: .2px; text-transform: none; }
.panel-heading > .fa, .panel-heading > .bi { color: var(--brand); width: 26px; height: 26px; background: #eef7f1; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; flex-shrink: 0; }
.panel-body { padding: 12px 14px; }
/* tüm panel tipleri AYNI hafif başlık + renkli ikon rozeti (sol ince accent) */
.panel-primary { border-top: 2px solid var(--brand); }
.panel-success { border-top: 2px solid var(--success-color); }
.panel-info { border-top: 2px solid var(--info-color); }
.panel-warning { border-top: 2px solid var(--warning-color); }
.panel-danger { border-top: 2px solid var(--danger-color); }
.panel-success > .panel-heading > .fa, .panel-success > .panel-heading > .bi { color: var(--success-color); background: #e8f8ef; }
.panel-info > .panel-heading > .fa, .panel-info > .panel-heading > .bi { color: var(--info-color); background: #e9f4fc; }
.panel-warning > .panel-heading > .fa, .panel-warning > .panel-heading > .bi { color: var(--warning-color); background: #fef3e2; }
.panel-danger > .panel-heading > .fa, .panel-danger > .panel-heading > .bi { color: var(--danger-color); background: #fdecea; }
.panel-title { margin: 0; font-size: .82rem; font-weight: 700; }

/* ---- Modern loader (eski indicator gif yerine) ---- */
.cn-loader { width: 44px; height: 44px; margin: 44px auto; border: 4px solid #e6eae8; border-top-color: var(--brand); border-radius: 50%; animation: cnspin .7s linear infinite; }
.cn-loader-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 0; color: var(--ink-soft); font-weight: 600; font-size: .85rem; animation: cnFadeIn .2s ease; }
img[src*="indicator03"] { content: ""; }

/* ---- Geçiş/animasyon (genel) ---- */
.app-sidebar { transition: width .26s cubic-bezier(.4,0,.2,1), padding .26s; }
.cn-cust-panel { transition: width .3s cubic-bezier(.4,0,.2,1), opacity .22s, margin .3s, padding .3s; }
.app-sidebar nav a, .snav, .side-filter, .btn, .topbar-icon-btn, .pagination > li > a, .nav-tabs > li > a { transition: all .16s ease; }
.dropdown-menu { animation: cnFadeIn .14s ease; }

/* ---- Sidebar collapse (daraltılmış: sadece ikon) ---- */
.app-shell.cn-sidebar-collapsed .app-sidebar { width: 78px; padding: 16px 10px; overflow: visible; }
.app-shell.cn-sidebar-collapsed .brand-text,
.app-shell.cn-sidebar-collapsed .sidebar-brand .brand-logo,
.app-shell.cn-sidebar-collapsed .su-meta,
.app-shell.cn-sidebar-collapsed .sidebar-section-label,
.app-shell.cn-sidebar-collapsed .app-sidebar nav a > span:not(.nav-icon-hexa):not(.nav-icon),
.app-shell.cn-sidebar-collapsed .sidebar-footer a > span,
.app-shell.cn-sidebar-collapsed .cn-side-toggle-text,
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li > a::after { display: none !important; }
.app-shell.cn-sidebar-collapsed .sidebar-brand { justify-content: center; }
.app-shell.cn-sidebar-collapsed .sidebar-brand::before { content: "CN"; font-weight: 800; color: var(--brand); font-size: 1.1rem; }
.app-shell.cn-sidebar-collapsed .sidebar-user { justify-content: center; padding: 8px; }
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li > a { justify-content: center; padding: 11px; font-size: 0; }
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li > a .nav-icon,
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li > a .nav-icon-hexa { font-size: .9rem; }
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li > a .nav-count { display: none; }
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li > ul { display: none !important; }
.app-shell.cn-sidebar-collapsed .sidebar-footer a { justify-content: center; }
/* collapsed: hover ile alt menü flyout (hover köprüsü ile kapanma sorunu çözüldü) */
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li { position: relative; }
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li > ul {
    /* görünmez ama hover'a açık tutmak için: gizliyken pointer-events kapalı */
    display: block !important; position: absolute; left: 100%; top: -10px; min-width: 220px; background: #fff;
    border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 38px rgba(0,0,0,.16); padding: 8px;
    margin: 0; z-index: 400; opacity: 0; visibility: hidden; transform: translateX(6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .18s; pointer-events: none;
}
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li:hover > ul {
    opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto;
    transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
/* görünmez hover köprüsü: menü ile flyout arasındaki boşluğu doldurur */
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li:hover > ul::before {
    content: ""; position: absolute; left: -22px; top: 0; width: 22px; height: 100%;
}
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li > ul a > span:not(.nav-icon-hexa) { display: inline !important; }
.app-shell.cn-sidebar-collapsed .app-sidebar nav > ul > li > ul a { font-size: .88rem; }

/* ---- Müşteri paneli akordiyon kapanma (sola gizlenir) ---- */
.app-shell.cn-hide-cust .cn-cust-panel { width: 0 !important; min-width: 0 !important; opacity: 0; margin: 0; padding: 0; pointer-events: none; }

/* ---- Rapor görüntüleyici: geniş emisyon tablosu yatay scroll ---- */
#RaporList .col-md-9 { overflow-x: auto; min-width: 0; }

/* ---- FIX: rapor/liste ekrani gizlenememesi ----
   .hesaplisteleme ve .raporgoster kapsayicilarinda BS5 'd-flex' (display:flex !important)
   var; clckcat()'in jQuery .hide()'i inline display:none yaziyor ama !important onu eziyordu
   -> rapor butonuna basinca veri listesi de gorunmeye devam ediyordu. Inline display:none'i zorla uygula. */
.hesaplisteleme[style*="display: none"], .hesaplisteleme[style*="display:none"],
.raporgoster[style*="display: none"], .raporgoster[style*="display:none"],
.dosyalisteleme[style*="display: none"], .dosyalisteleme[style*="display:none"] { display: none !important; }

/* ---- Rapor kategori/tip butonlari: modern, sexy, ikonlu ---- */
#RaporList .leftbtn, #RaporList .toptbtn {
    border-radius: 11px !important; font-weight: 600; font-size: .82rem; letter-spacing: .1px;
    border: 1px solid transparent !important; transition: transform .14s, box-shadow .14s, background .14s;
    display: inline-flex; align-items: center; gap: 9px; line-height: 1.25; text-align: left;
}
#RaporList .leftbtn { width: 100%; padding: 11px 14px; margin: 0 0 8px !important; justify-content: flex-start; }
#RaporList .toptbtn { height: auto !important; min-height: 3.4em; padding: 10px 12px; justify-content: center; text-align: center; }
#RaporList .topbutonmain { gap: 8px; }
/* seçilmemiş (btn-primary) = yumuşak yeşil chip */
#RaporList .leftbtn.btn-primary, #RaporList .toptbtn.btn-primary {
    background: #eaf7ef !important; color: #15803d !important; border-color: #cfecda !important; box-shadow: none;
}
#RaporList .leftbtn.btn-primary:hover, #RaporList .toptbtn.btn-primary:hover {
    background: #dcf2e5 !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(22,163,74,.16);
}
/* seçili (btn-success) = dolu brand yeşil */
#RaporList .leftbtn.btn-success, #RaporList .toptbtn.btn-success {
    background: var(--brand-grad) !important; color: #fff !important; border-color: transparent !important;
    box-shadow: 0 6px 16px var(--brand-shadow);
}
#RaporList .leftbtn.btn-success:hover, #RaporList .toptbtn.btn-success:hover { transform: translateY(-2px); filter: brightness(1.04); }
#RaporList .toptbtn.btn-default { background:#f4f6f5 !important; color:#9aa3a0 !important; border:1px dashed #dde3e0 !important; box-shadow:none; min-height:3.4em; }
/* ikonlar (FA, ::before) — buton sinifina göre */
#RaporList .leftbtn::before, #RaporList .toptbtn.iconed::before { font-family:"FontAwesome"; font-weight:normal; font-size:.95rem; width:18px; text-align:center; flex-shrink:0; }
#RaporList .leftbtn1::before{content:"\f0c9"}  /* kategori: list */
#RaporList .leftbtn2::before{content:"\f0c9"}
#RaporList .leftbtn3::before{content:"\f0c9"}
#RaporList .leftbtn4::before{content:"\f0c9"}
#RaporList .leftbtn5::before{content:"\f0c9"}
#RaporList .leftbtn6::before{content:"\f0c9"}
#RaporList .leftbtn7::before, #RaporList .leftbtn10::before{content:"\f15b"}  /* dosya */
#RaporList .leftbtn8::before, #RaporList .leftbtn9::before{content:"\f1ea"}   /* rapor */

/* ---- Sidebar içi collapse/panel toggle butonlari ---- */
.cn-side-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; cursor: pointer;
    color: var(--ink-soft); font-weight: 600; font-size: .84rem; background: none; border: none; width: 100%; text-align: left; }
.cn-side-toggle:hover { background: #eefaf1; color: var(--brand); }
.cn-side-toggle i { font-size: 1.05rem; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1100px) {
    .cn-layout { flex-direction: column; }
    .cn-cust-panel { width: 100%; }
    #DivMusteriListesi { max-height: 40vh; }
}
@media (max-width: 992px) {
    .app-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s; box-shadow: 0 0 40px rgba(0,0,0,.2); }
    .app-sidebar.open { transform: translateX(0); }
    .topbar-toggle { display: inline-block; }
}
@media (max-width: 768px) {
    .app-content { padding: 14px; }
    .topbar-title { font-size: 1.05rem; }
    .portlet-content { padding: 10px; overflow-x: auto; }
}