:root { 
            --bg-dark: #050505; 
            --bg-panel: #0f1115; 
            --neon-green: #00ff9d; 
            --neon-blue: #00f3ff; 
            --neon-red: #ff0055; 
            --neon-yellow: #ffed4e;
            --text-main: #e0e0e0; 
            --border: rgba(255,255,255,0.08); 
        }
        body { 
            background-color: var(--bg-dark); 
            color: var(--text-main); 
            font-family: 'Inter', sans-serif; 
        }
        
        .glass-panel { 
            background: var(--bg-panel); 
            border: 1px solid var(--border); 
            border-radius: 16px; 
            padding: 20px; 
            margin-bottom: 24px; 
            box-shadow: 0 4px 20px rgba(0,0,0,0.5); 
        }
        
        .kpi-card {
            background: linear-gradient(135deg, #0f1115 0%, #1a1d24 100%);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }
        
        .kpi-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--neon-green);
            box-shadow: 0 0 10px var(--neon-green);
        }
        
        .kpi-val { 
            font-size: 2.5rem; 
            font-weight: 800; 
            line-height: 1; 
        }
        
        .vpd-box { 
            background: linear-gradient(90deg, #0f1115 0%, #162a23 100%); 
            border-left: 4px solid var(--neon-green); 
            box-shadow: 0 0 20px rgba(0, 255, 157, 0.2);
        }
        
        .weather-card { 
            background: #131519; 
            border: 1px solid var(--border); 
            border-radius: 12px; 
            padding: 20px; 
            cursor: pointer; 
            transition: 0.3s; 
        }
        
        .weather-card:hover { 
            border-color: var(--neon-blue); 
            transform: translateY(-3px); 
            box-shadow: 0 8px 20px rgba(0, 243, 255, 0.3);
        }
        
        .weather-card.risk {
            border-left: 4px solid var(--neon-red);
        }
        
        .weather-card.safe {
            border-left: 4px solid var(--neon-green);
        }
        
        /* HEATMAP Canvas - V59 Gaussian Blur */
        .heatmap-canvas-wrapper {
            position: relative;
            width: 100%;
            height: 400px;
            background: #000;
            border: 4px solid #333;
            border-radius: 8px;
            overflow: hidden;
        }
        
        #heatmapCanvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .neon-text {
            color: var(--neon-green);
            text-shadow: 0 0 10px var(--neon-green);
        }
        
        .chart-container { 
            position: relative; 
            height: 280px; 
        }
        
        .modal-chart-container { 
            position: relative; 
            height: 150px; 
        }
        
        .risk-card {
            background: rgba(255, 0, 85, 0.1);
            border: 1px solid rgba(255, 0, 85, 0.3);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 8px;
        }
        
        .risk-card-header {
            font-weight: bold;
            color: var(--neon-red);
            margin-bottom: 4px;
        }
        
        .btn-filter {
            background: transparent;
            border: 1px solid #444;
            color: #888;
            padding: 6px 16px;
            border-radius: 6px;
            transition: 0.3s;
        }
        
        .btn-filter.active {
            background: var(--neon-blue);
            color: black;
            border-color: var(--neon-blue);
            box-shadow: 0 0 10px var(--neon-blue);
        }
        
        .sensor-time {
            font-size: 0.85rem;
            color: var(--neon-yellow);
            text-shadow: 0 0 5px var(--neon-yellow);
        }
        
        .device-select {
            background: var(--bg-panel);
            border: 1px solid var(--border);
            color: white;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.85rem;
        }
        
        .logout-btn {
            background: rgba(255, 0, 85, 0.1);
            border: 1px solid var(--neon-red);
            color: var(--neon-red);
            padding: 8px 16px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: 0.3s;
        }
        
        .logout-btn:hover {
            background: var(--neon-red);
            color: black;
            box-shadow: 0 0 15px var(--neon-red);
        }
        
        /* VPD Info Button - Pulse Animation */
        @keyframes pulse-vpd {
            0%, 100% { 
                transform: scale(1); 
                box-shadow: 0 0 15px rgba(0, 255, 157, 0.4);
            }
            50% { 
                transform: scale(1.08); 
                box-shadow: 0 0 30px rgba(0, 255, 157, 0.8), 0 0 15px rgba(255, 255, 255, 0.6);
            }
        }
        
        .vpd-info-btn {
            animation: pulse-vpd 2.5s infinite;
            background: rgba(0, 255, 157, 0.08);
            border: 2px solid rgba(0, 255, 157, 0.4);
            border-radius: 50%;
            padding: 10px;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        
        .vpd-info-btn:hover {
            animation: none;
            background: rgba(0, 255, 157, 0.2);
            border-color: var(--neon-green);
            transform: scale(1.15) rotate(5deg);
            box-shadow: 0 0 35px rgba(0, 255, 157, 1), 0 0 20px rgba(255, 255, 255, 0.8);
        }
        
        .vpd-info-btn img {
            transition: filter 0.3s;
        }
        
        .vpd-info-btn:hover img {
            filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(0, 255, 157, 1));
        }
        
        /* Heatmap Info Button - Smaller version */
        .heatmap-info-btn {
            animation: pulse-vpd 3s infinite;
            background: rgba(0, 255, 157, 0.08);
            border: 1.5px solid rgba(0, 255, 157, 0.4);
            border-radius: 50%;
            padding: 6px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        
        .heatmap-info-btn:hover {
            animation: none;
            background: rgba(0, 255, 157, 0.2);
            border-color: var(--neon-green);
            transform: scale(1.15) rotate(5deg);
            box-shadow: 0 0 25px rgba(0, 255, 157, 1), 0 0 15px rgba(255, 255, 255, 0.8);
        }
        
        .heatmap-info-btn img {
            transition: filter 0.3s;
        }
        
        .heatmap-info-btn:hover img {
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(0, 255, 157, 1));
        }
        
        /* Öneri Kartları */
        .akilli-oneri {
            font-size: 0.9rem;
            line-height: 1.6;
        }
        
        .oneri-item {
            padding: 8px 12px;
            border-radius: 6px;
            margin-bottom: 6px;
            border-left: 3px solid;
            background: rgba(0, 0, 0, 0.2);
            font-size: 0.85rem;
        }
        
        .oneri-dogru {
            border-left-color: var(--neon-green);
            color: #a0f0d0;
        }
        
        .oneri-yanlis {
            border-left-color: var(--neon-red);
            color: #ffa0b0;
            background: rgba(255, 0, 85, 0.1);
            font-weight: 600;
        }
        
        .oneri-uyari {
            border-left-color: var(--neon-yellow);
            color: #fff4a0;
            background: rgba(255, 237, 78, 0.1);
        }
        
        /* Smart Decision System */
        .decision-panel {
            background: var(--bg-panel);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 24px;
        }
        
        .decision-panel.critical {
            border-left: 4px solid var(--neon-red);
            background: linear-gradient(90deg, rgba(255, 0, 85, 0.1) 0%, var(--bg-panel) 100%);
            animation: pulse-critical 2s infinite;
        }
        
        .decision-panel.caution {
            border-left: 4px solid var(--neon-yellow);
            background: linear-gradient(90deg, rgba(255, 237, 78, 0.05) 0%, var(--bg-panel) 100%);
        }
        
        .decision-panel.normal {
            border-left: 4px solid var(--neon-green);
        }
        
        @keyframes pulse-critical {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.4); }
            50% { box-shadow: 0 0 20px 10px rgba(255, 0, 85, 0); }
        }
        
        .decision-card {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;
        }
        
        .decision-card.critical {
            border-color: var(--neon-red);
            background: rgba(255, 0, 85, 0.05);
        }
        
        .decision-card.warning {
            border-color: var(--neon-yellow);
            background: rgba(255, 237, 78, 0.05);
        }
        
        .decision-card.success {
            border-color: var(--neon-green);
            background: rgba(0, 255, 157, 0.05);
        }
        
        .severity-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .severity-badge.critical {
            background: var(--neon-red);
            color: black;
        }
        
        .severity-badge.warning {
            background: var(--neon-yellow);
            color: black;
        }
        
        .action-list {
            list-style: none;
            padding: 0;
            margin: 10px 0 0 0;
        }
        
        .action-list li {
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 0.9rem;
        }
        
        .action-list li:last-child {
            border-bottom: none;
        }
        
        .conflict-box {
            background: rgba(255, 237, 78, 0.1);
            border-left: 3px solid var(--neon-yellow);
            padding: 12px;
            border-radius: 6px;
            margin: 10px 0;
        }
        
        .alternative-box {
            background: rgba(0, 255, 157, 0.1);
            border-left: 3px solid var(--neon-green);
            padding: 12px;
            border-radius: 6px;
            margin: 10px 0;
        }
  /* ============================================================
   PAGE: isletme_ekle.php  (Ortak Tema)
============================================================ */

/* global sticky footer */
html, body { height: 100%; }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(1100px 600px at 10% 0%, rgba(34,197,94,.12), transparent 55%),
    radial-gradient(900px 520px at 90% 10%, rgba(56,189,248,.10), transparent 58%),
    linear-gradient(180deg, #070a12 0%, #05070d 100%);
  color:#e7eefc;
}
.page-main{ flex:1 0 auto; }
footer{ margin-top:auto !important; }

/* page scope */
.page-isletme-ekle{
  --card: rgba(13, 20, 36, .92);
  --line: rgba(255,255,255,.10);
  --text: #e7eefc;
  --muted: rgba(231,238,252,.65);
  --neon: #22c55e;
  --neon2:#38bdf8;
  --warn:#fbbf24;
}

.page-isletme-ekle .card{
  background: var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.30) !important;
}
.page-isletme-ekle .card-header{
  background: transparent !important;
  border-bottom:1px solid var(--line) !important;
  color: var(--text) !important;
}
.page-isletme-ekle .form-label{
  color: var(--muted) !important;
  font-weight:800;
  font-size:.82rem;
}
.page-isletme-ekle .form-control,
.page-isletme-ekle .form-select{
  background: rgba(7,10,18,.70) !important;
  color: var(--text) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  box-shadow:none !important;
  outline:none !important;
  color-scheme: dark;
}
.page-isletme-ekle .form-control::placeholder{ color:rgba(231,238,252,.40); }
.page-isletme-ekle .form-control:focus,
.page-isletme-ekle .form-select:focus{
  border-color: rgba(34,197,94,.65) !important;
  box-shadow: 0 0 0 .18rem rgba(34,197,94,.16) !important;
}

/* dropdown okunurluk */
.page-isletme-ekle select option{
  background:#0b1020;
  color:#e7eefc;
}

/* buttons */
.page-isletme-ekle .btn-soft{
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.page-isletme-ekle .btn-soft:hover{ background: rgba(255,255,255,.10); }

.page-isletme-ekle .btn-save{
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34,197,94,1), rgba(34,197,94,.70));
  border: none;
  color: #07120b;
  font-weight: 900;
}
.page-isletme-ekle .btn-save:hover{ filter:brightness(1.05); }

.page-isletme-ekle .badge-id{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.40rem .70rem;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
  color: rgba(231,238,252,.92);
  font-size:.85rem;
}
.page-isletme-ekle .success-card{
  border:1px solid rgba(34,197,94,.35) !important;
  background: rgba(34,197,94,.08) !important;
}
.page-isletme-ekle .alert{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(251,113,133,.12);
  color: var(--text);
}

/* switch */
.page-isletme-ekle .form-check-input{
  background-color: rgba(7,10,18,.70);
  border-color: rgba(255,255,255,.20);
}
.page-isletme-ekle .form-check-input:checked{
  background-color: var(--neon);
  border-color: rgba(34,197,94,.75);
}
  /* İşletme Aktif kutusu yazıları */
.page-isletme-ekle .isletme-aktif-box .fw-bold{
  color: #ffffff !important;
}
.page-isletme-ekle .isletme-aktif-box .small{
  color: rgba(255,255,255,.78) !important;
}
/* =========================================
   BOOTSTRAP RENK DÜZELTMELERİ (YAMA)
   ========================================= */

/* 1. Tüm Başlıkları Beyaz Yap */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff !important;
}

/* 2. "text-muted" (Pasif Yazı) Sınıfını Açık Gri Yap */
.text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 3. Kart İçindeki Küçük Yazıları Düzenle */
.small, small {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 4. Tablo Yazıları Okunur Olsun */
.table {
    color: var(--text-main) !important;
}

/* 5. Kart Başlıkları (Özellikle ekran görüntüsündeki okların olduğu yerler) */
.kpi-card .text-uppercase,
.glass-panel .text-uppercase {
    color: rgba(255, 255, 255, 0.7) !important;
    letter-spacing: 1px;
}

/* 6. Finans ve Sistem Büyümesi kutusundaki çizgili alanlar */
.border-secondary {
    border-color: rgba(255, 255, 255, 0.15) !important;
}
/* ============================================================
   ZORLAYICI DÜZELTMELER (FIX PACK)
   Bu kodları css dosyasının en altına ekleyin.
   ============================================================ */

/* 1. Tablo ve Kartların Arka Planını Koyu Yap */
.glass-panel, 
.card, 
.table-responsive {
    background-color: var(--bg-panel) !important; /* Koyu renk zorla */
    color: var(--text-main) !important; /* Yazıyı beyaz yap */
}

/* 2. Tablo Satırlarının Beyaz Olmasını Engelle */
.table {
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--text-main) !important;
    background-color: transparent !important;
    color: var(--text-main) !important;
}

.table td, .table th {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: var(--border) !important;
}

/* 3. Hover (Üzerine gelince) Efektini Neon Yap */
.table-hover > tbody > tr:hover > * {
    background-color: rgba(0, 230, 118, 0.1) !important; /* Hafif neon yeşil */
    color: #fff !important;
    box-shadow: inset 0 0 10px rgba(0, 230, 118, 0.05);
}

/* 4. Dashboard Başlıklarını (Ok ile gösterdiğiniz yerler) Parlat */
.text-muted, 
.small.text-muted, 
.kpi-card .text-uppercase {
    color: rgba(255, 255, 255, 0.6) !important; /* Koyu gri yerine açık gri */
}

/* 5. Arama Kutusu ve Inputları Koyu Yap */
.form-control {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--border) !important;
    color: #fff !important;
}
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
/* =========================================
   BUTON VE İKON DÜZELTMELERİ
   (smart-panel-theme.css en altına ekleyin)
   ========================================= */

/* 1. "Yeni Ekle" Butonunu Görünür Yap (Neon Yeşil) */
.btn-action {
    background-color: var(--neon-green) !important;
    color: #000 !important; /* Yazı siyah olsun ki okunsun */
    border: 1px solid var(--neon-green) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.4);
    transition: all 0.3s ease;
}

.btn-action:hover {
    background-color: #00ff9d !important;
    box-shadow: 0 0 25px rgba(0, 230, 118, 0.7);
    transform: translateY(-2px);
}

/* 2. Düzenle/Sil İkonlarını Büyüt */
.btn-icon-custom {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem !important; /* İkon boyutu */
    margin: 0 2px;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-icon-custom:hover {
    transform: scale(1.15);
}

/* 3. Silik Yazıları Okunur Yap (Örn: Cihaz Yok) */
.text-dim-visible {
    color: rgba(255, 255, 255, 0.5) !important; /* Çok silik değil, orta görünürlük */
    font-size: 0.85rem;
    font-style: italic;
}
/* =========================================
   STICKY FOOTER (ALT BİLGİYİ SABİTLEME)
   ========================================= */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ekranın tamamını kapla */
}

/* İçerik alanını (main) büyümeye zorla */
main, .page-main, .container-fluid {
    flex: 1 0 auto;
}

/* Footer'ın kendisi */
footer {
    flex-shrink: 0;
    width: 100%;
    margin-top: auto; /* Otomatik olarak en alta it */
}