:root {
     --primary-color: #0a3d62;
     --primary-light: #1e5f8a;
     --primary-dark: #062642;
     --accent-color: #2ecc71;
     --accent-warning: #f39c12;
     --accent-info: #3498db;
     --text-dark: #2c3e50;
     --text-medium: #5d6d7e;
     --text-light: #95a5a6;
     --bg-light: #f8fafc;
     --bg-card: #ffffff;
     --shadow-sm: 0 2px 8px rgba(10, 61, 98, 0.08);
     --shadow-md: 0 8px 24px rgba(10, 61, 98, 0.12);
     --shadow-lg: 0 16px 48px rgba(10, 61, 98, 0.16);
     --shadow-hover: 0 20px 60px rgba(10, 61, 98, 0.2);
     --radius-sm: 8px;
     --radius-md: 12px;
     --radius-lg: 16px;
     --radius-xl: 24px;
     --transition-fast: 0.2s ease;
     --transition-normal: 0.3s ease;
     --transition-slow: 0.5s ease;
 }

 /* ═══════════════════════════════════════════════════════════════
                       İLERLEME ÇUBUĞU STİLLERİ
                    ═══════════════════════════════════════════════════════════════ */
 .progress-title {
     font-size: 18px;
     font-weight: 700;
     color: var(--bg-card);
     margin: 0 0 20px;
     letter-spacing: 0.3px;
 }

 .progress {
     width: 100%;
     height: 10px;
     border-radius: 20px;
     border: none;
     overflow: visible;
     position: relative;
     background: linear-gradient(90deg, rgba(10, 61, 98, 0.1) 0%, rgba(10, 61, 98, 0.05) 100%) !important;
 }

 .progress .progress-bar {
     border-radius: 20px;
     background: linear-gradient(90deg, var(--accent-color) 0%, #27ae60 100%);
     box-shadow: 0 2px 8px rgba(46, 204, 113, 0.4);
     animation: animate-positive 1.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .progress .progress-value {
     width: 50px;
     height: 24px;
     line-height: 24px;
     background: var(--primary-color);
     font-size: 12px;
     font-weight: 600;
     color: var(--bg-card);
     border-radius: var(--radius-sm);
     position: absolute;
     bottom: -30px;
     right: 0;
     text-align: center;
     box-shadow: var(--shadow-sm);
 }

 @-webkit-keyframes animate-positive {
     0% {
         width: 0;
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 @keyframes animate-positive {
     0% {
         width: 0;
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 /* ═══════════════════════════════════════════════════════════════
                       PROJE KART STİLLERİ - MODERN & ANİMASYONLU
                    ═══════════════════════════════════════════════════════════════ */
 .projeKart {
     background: var(--bg-card);
     border-radius: var(--radius-xl);
     margin: 16px;
     overflow: hidden;
     box-shadow: var(--shadow-md);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border: 1px solid rgba(10, 61, 98, 0.06);
 }

 .projeKart:hover {
     box-shadow: var(--shadow-hover);
     transform: translateY(-12px) scale(1.02);
 }

 .card-img-top {
     width: 100%;
     max-height: 200px;
     min-height: 200px;
     object-fit: cover;
     border-radius: var(--radius-lg);
     transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     box-shadow: 0 8px 20px rgba(10, 61, 98, 0.15);
     filter: brightness(1);
 }

 .card-img-top:hover {
     transform: scale(1.08);
     box-shadow: 0 16px 40px rgba(10, 61, 98, 0.25);
     filter: brightness(1.05);
 }

 .yatirimlarDiv {
     padding: 12px;
     perspective: 1000px;
 }

 /* Kart için stagger animasyon */
 .yatirimlarDiv:nth-child(1) {
     animation-delay: 0.05s;
 }

 .yatirimlarDiv:nth-child(2) {
     animation-delay: 0.1s;
 }

 .yatirimlarDiv:nth-child(3) {
     animation-delay: 0.15s;
 }

 .yatirimlarDiv:nth-child(4) {
     animation-delay: 0.2s;
 }

 .yatirimlarDiv:nth-child(5) {
     animation-delay: 0.25s;
 }

 .yatirimlarDiv:nth-child(6) {
     animation-delay: 0.3s;
 }

 .yatirimlarDiv:nth-child(7) {
     animation-delay: 0.35s;
 }

 .yatirimlarDiv:nth-child(8) {
     animation-delay: 0.4s;
 }

 /* ═══════════════════════════════════════════════════════════════
                       BÜTÜNLEŞIK KART TASARIMI
                    ═══════════════════════════════════════════════════════════════ */
 .project-card {
     background: var(--bg-card);
     border-radius: var(--radius-xl);
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(10, 61, 98, 0.1);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border: 1px solid rgba(10, 61, 98, 0.06);
 }

 .project-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 16px 40px rgba(10, 61, 98, 0.18);
 }

 .project-card .card-image-wrapper {
     position: relative;
     overflow: hidden;
 }

 .project-card .card-img-top {
     width: 100%;
     height: 180px;
     object-fit: cover;
     transition: all 0.5s ease;
     border-radius: 0;
     box-shadow: none;
 }

 .project-card:hover .card-img-top {
     transform: scale(1.08);
 }

 .project-card .card-body {
     padding: 16px;
     background: var(--bg-card);
 }

 .project-card .card-title {
     font-size: 14px;
     font-weight: 600;
     color: var(--text-dark);
     line-height: 1.4;
     margin: 0;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     transition: color 0.3s ease;
 }

 .project-card:hover .card-title {
     color: var(--primary-color);
 }

 /* Status Badge - Kart içinde */
 .project-card .status-badge {
     position: absolute;
     top: 12px;
     right: 12px;
     padding: 6px 12px;
     border-radius: 50px;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     z-index: 2;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }

 /* Eski stiller için uyumluluk */
 .progresDisDiv {
     display: none;
 }

 .project-card-wrapper {
     display: none;
 }


 .card-text {
     margin-bottom: 0;
     color: var(--text-medium);
     font-size: 14px;
     line-height: 1.6;
 }

 /* ═══════════════════════════════════════════════════════════════
                       NAVİGASYON TAB STİLLERİ
                    ═══════════════════════════════════════════════════════════════ */
 .yatirimNav .nav-pills {
     justify-content: center;
     margin-bottom: 32px;
     gap: 12px;
     padding: 8px;
     background: var(--bg-light);
     border-radius: var(--radius-xl);
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
 }

 .yatirimNav .nav-link {
     padding: 12px 28px;
     font-size: 14px;
     font-weight: 600;
     color: var(--text-medium);
     border-radius: var(--radius-lg);
     transition: all var(--transition-normal);
     border: none;
     background: transparent;
     position: relative;
     overflow: hidden;
 }

 .yatirimNav .nav-link:hover {
     color: var(--primary-color);
     background: rgba(10, 61, 98, 0.08);
 }

 .yatirimNav .nav-pills .nav-link.active,
 .nav-pills .show>.nav-link {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
     color: var(--bg-card) !important;
     box-shadow: 0 6px 20px rgba(10, 61, 98, 0.35);
     border: none;
 }

 /* ═══════════════════════════════════════════════════════════════
                       İHBAR LİNK STİLLERİ
                    ═══════════════════════════════════════════════════════════════ */
 .ihbarCl {
     text-decoration: none;
     color: var(--accent-warning);
     font-size: 18px;
     font-weight: 600;
     transition: all var(--transition-fast);
 }

 .ihbarCl:hover {
     text-decoration: none;
     color: #e74c3c;
     transform: scale(1.05);
 }

 /* ═══════════════════════════════════════════════════════════════
                       HARİTA OVERLAY MENÜ STİLLERİ
                    ═══════════════════════════════════════════════════════════════ */
 .ol-overlay.menu {
     width: 320px;
     background: var(--bg-card);
     color: var(--text-dark);
     box-shadow: var(--shadow-lg);
     padding: 20px;
     border-radius: var(--radius-lg);
     transition: all var(--transition-normal);
     border: 1px solid rgba(10, 61, 98, 0.08);
 }

 .ol-overlay.menu .ol-closebox {
     color: var(--primary-color);
     left: 16px;
     top: 12px;
     font-size: 18px;
     cursor: pointer;
     transition: color var(--transition-fast);
 }

 .ol-overlay.menu .ol-closebox:hover {
     color: var(--primary-light);
 }

 .ol-overlay.menu .ol-closebox:before {
     content: "\f0c9";
     font-family: FontAwesome;
 }

 #menuFilter {
     padding-top: 24px;
     font-size: 14px;
 }

 .filtreMenuBtn {
     top: 80px;
     left: 12px;
 }

 @media (max-width: 767px) {
     .ol-overlay.menu {
         width: 85%;
         max-width: 320px;
         z-index: 10;
         background: var(--bg-card);
         box-shadow: var(--shadow-lg);
         padding: 16px;
         border-radius: var(--radius-lg);
     }
 }

 /* ═══════════════════════════════════════════════════════════════
                       POPUP TABLO STİLLERİ
                    ═══════════════════════════════════════════════════════════════ */
 @media (max-width: 500px) {
     .popup-table {
         font-size: 11px;
     }
 }

 @media (min-width: 501px) {
     .popup-table {
         font-size: 14px;
     }
 }




 /* ═══════════════════════════════════════════════════════════════
                       POPUP STİLLERİ
                    ═══════════════════════════════════════════════════════════════ */
 .popup {
     position: absolute;
     background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
     backdrop-filter: blur(12px);
     padding: 20px;
     border-radius: var(--radius-md);
     border: 1px solid rgba(10, 61, 98, 0.1);
     box-shadow: var(--shadow-lg);
     font-family: inherit;
     font-size: 14px;
     color: var(--text-dark);
     display: none;
     min-width: 200px;
     text-align: center;
 }

 .popup-content {
     padding: 8px;
     font-size: 14px;
     line-height: 1.6;
 }

 .popup-close:hover {
     color: var(--primary-color);
 }

 .popup a {
     display: inline-block;
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
     color: var(--bg-card);
     padding: 10px 20px;
     border-radius: var(--radius-sm);
     text-decoration: none;
     font-size: 13px;
     font-weight: 600;
     box-shadow: 0 4px 12px rgba(10, 61, 98, 0.25);
     transition: all var(--transition-normal);
 }

 .popup a:hover {
     background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
     box-shadow: 0 6px 16px rgba(10, 61, 98, 0.35);
     transform: translateY(-2px);
 }

 /* ═══════════════════════════════════════════════════════════════
                       YARDIMCI STİLLER
                    ═══════════════════════════════════════════════════════════════ */
 .stroke-text {
     font-size: 48px;
     font-weight: 800;
     color: var(--primary-color);
     text-shadow: 2px 2px 0 var(--bg-card), -2px -2px 0 var(--bg-card), 2px -2px 0 var(--bg-card), -2px 2px 0 var(--bg-card);
 }

 .bold-label {
     font-weight: 700;
     color: var(--text-dark);
 }

 /* ═══════════════════════════════════════════════════════════════
                       KAMERA MODAL STİLLERİ
                    ═══════════════════════════════════════════════════════════════ */
 /* Modal backdrop - gri boşlukları kaldır */
 #kameraDetayModal.modal {
     padding: 0 !important;
 }

 body.modal-open #kameraDetayModal.modal {
     padding: 0 !important;
 }

 /* Bootstrap'ın body'ye eklediği padding'i kaldır ve kaydırmayı engelle */
 body.modal-open {
     padding-right: 0 !important;
     overflow: hidden !important;
 }

 /* Mobilde JS ile yönetilecek fixed state'i için hazırlık */
 body.modal-open-fixed {
     overflow: hidden !important;
 }

 #kameraDetayModal+.modal-backdrop,
 body.modal-open #kameraDetayModal+.modal-backdrop,
 body.modal-open .modal-backdrop.show {
     background-color: rgba(0, 0, 0, 0.8);
 }

 /* Desktop - Modal ortada, küçük ve kompakt */
 @media (min-width: 769px) {
     #kameraDetayModal .modal-dialog {
         margin: 0 auto;
         max-width: 800px;
         width: 800px;
         height: auto;
         max-height: 90vh;
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 0;
     }
 }

 #kameraDetayModal .modal-content {
     border-radius: var(--radius-xl);
     overflow: hidden;
     box-shadow: var(--shadow-lg);
     border: none;
     width: 100%;
     margin: 0;
 }

 #kameraDetayModal .modal-header {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
     color: var(--bg-card);
     padding: 10px 20px;
     border-bottom: none;
 }

 /* Desktop'ta header daha kompakt */
 @media (min-width: 769px) {
     #kameraDetayModal .modal-header {
         padding: 8px 18px;
     }

     #kameraDetayModal .modal-header .modal-title {
         font-size: 18px;
     }

     #kameraDetayModal .modal-header .modal-title i {
         font-size: 20px;
     }
 }

 #kameraDetayModal .modal-header .modal-title {
     font-size: 20px;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--bg-card);
 }

 #kameraDetayModal .modal-header .modal-title i {
     font-size: 24px;
     color: var(--bg-card);
 }

 #kameraDetayModal .modal-header .btn-close {
     filter: brightness(0) invert(1);
     opacity: 0.9;
     transition: all var(--transition-fast);
 }

 #kameraDetayModal .modal-header .btn-close:hover {
     opacity: 1;
     transform: scale(1.1);
 }

 #kameraDetayModal .modal-body {
     padding: 0;
     background: #000;
     position: relative;
     overflow: hidden;
 }

 #kameraDetayModal .modal-body::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(180deg, rgba(10, 61, 98, 0.1) 0%, transparent 50%, rgba(10, 61, 98, 0.1) 100%);
     z-index: 1;
     pointer-events: none;
 }

 #kameraDetayModal .video-container-wrapper {
     position: relative;
     width: 100%;
     min-height: 450px;
     background: #000;
     display: flex;
     align-items: stretch;
 }

 .camera-iframe-responsive {
     width: 100%;
     height: 100%;
     min-height: 450px;
     border: 0;
     display: block;
 }

 /* Desktop'ta video container'ı tam ekrana sığdır */
 @media (min-width: 769px) {
     #kameraDetayModal .video-container-wrapper {
         min-height: 0;
         aspect-ratio: 16/9;
         width: 100%;
     }

     .camera-iframe-responsive {
         min-height: 0;
         width: 100%;
         height: 100%;
     }
 }

 #kameraDetayModal .modal-footer {
     background: var(--bg-light);
     padding: 10px 20px;
     border-top: 1px solid rgba(10, 61, 98, 0.1);
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 /* Desktop'ta footer daha kompakt */
 @media (min-width: 769px) {
     #kameraDetayModal .modal-footer {
         padding: 8px 18px;
     }

     #kameraDetayModal .modal-footer .btn {
         padding: 8px 20px;
         font-size: 14px;
     }
 }

 #kameraDetayModal .modal-footer .btn {
     padding: 10px 24px;
     font-weight: 600;
     border-radius: var(--radius-md);
     transition: all var(--transition-normal);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 #kameraDetayModal .modal-footer .btn-primary {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
     border: none;
     color: var(--bg-card);
     box-shadow: 0 4px 12px rgba(10, 61, 98, 0.25);
 }

 #kameraDetayModal .modal-footer .btn-primary:hover {
     background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
     box-shadow: 0 6px 16px rgba(10, 61, 98, 0.35);
     transform: translateY(-2px);
 }

 #kameraDetayModal .modal-footer .btn-secondary {
     background: var(--bg-card);
     border: 1px solid rgba(10, 61, 98, 0.2);
     color: var(--text-dark);
 }

 #kameraDetayModal .modal-footer .btn-secondary:hover {
     background: var(--bg-light);
     border-color: var(--primary-color);
     color: var(--primary-color);
     transform: translateY(-2px);
 }

 #kameraDetayModal.modal.fade .modal-dialog {
     transition: opacity 0.3s ease-out, transform 0.3s ease-out;
     opacity: 0;
     transform: scale(0.95);
 }

 #kameraDetayModal.modal.show .modal-dialog {
     opacity: 1;
     /*  transform: scale(1); */
 }

 #kameraDetayModal #modalKameraVideo::before {
     content: 'Yükleniyor...';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;
     font-size: 16px;
     z-index: 2;
     display: none;
 }

 #kameraDetayModal #modalKameraVideo[src=""]::before {
     display: block;
 }

 #wifiDetayModal .modal-content {
     border-radius: var(--radius-xl);
     overflow: hidden;
     box-shadow: var(--shadow-lg);
     border: none;
 }

 #wifiDetayModal .modal-header {
     background: linear-gradient(135deg, var(--accent-color) 0%, #27ae60 100%);
     color: var(--bg-card);
     padding: 20px 24px;
     border-bottom: none;
 }

 #wifiDetayModal .modal-header .modal-title {
     font-size: 20px;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--bg-card);
 }

 #wifiDetayModal .modal-header .modal-title i {
     font-size: 24px;
     color: var(--bg-card);
 }

 #wifiDetayModal .modal-footer {
     background: var(--bg-light);
     padding: 16px 24px;
     border-top: 1px solid rgba(10, 61, 98, 0.1);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
 }

 #wifiDetayModal .modal-footer .btn {
     padding: 12px 28px;
     font-weight: 600;
     border-radius: var(--radius-md);
     transition: all var(--transition-normal);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     flex: 1;
     border: none;
     font-size: 15px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }

 #wifiDetayModal .modal-footer .btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: left 0.5s ease;
 }

 #wifiDetayModal .modal-footer .btn:hover::before {
     left: 100%;
 }

 #wifiDetayModal .modal-footer .btn-modern-green {
     background: linear-gradient(135deg, var(--accent-color) 0%, #27ae60 100%);
     color: white;
 }

 #wifiDetayModal .modal-footer .btn-modern-green:hover {
     background: linear-gradient(135deg, #27ae60 0%, var(--accent-color) 100%);
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
 }

 #wifiDetayModal .modal-footer .btn-modern-blue {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
     color: white;
 }

 #wifiDetayModal .modal-footer .btn-modern-blue:hover {
     background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(10, 61, 98, 0.4);
 }

 #wifiDetayModal .modal-footer .btn i {
     font-size: 16px;
 }

 @media (max-width: 768px) {

     /* Mobil - Tam ekran, gri boşluk yok */
     #kameraDetayModal.modal {
         padding: 0 !important;
     }

     #kameraDetayModal .modal-dialog {
         margin: 0 !important;
         max-width: 100% !important;
         width: 100% !important;
         height: 100vh !important;
         max-height: 100vh !important;
         padding: 0 !important;
         display: flex;
         align-items: stretch;
     }

     #kameraDetayModal .modal-content {
         height: 100vh !important;
         border-radius: 0 !important;
         display: flex;
         flex-direction: column;
         max-width: 100% !important;
         margin: 0 !important;
     }

     #kameraDetayModal .modal-header {
         padding: 16px;
         flex-shrink: 0;
     }

     #kameraDetayModal .modal-header .modal-title {
         font-size: 16px;
         gap: 8px;
     }

     #kameraDetayModal .modal-header .modal-title i {
         font-size: 18px;
     }

     #kameraDetayModal .modal-body {
         flex: 1;
         overflow: hidden;
         padding: 0;
         display: flex;
         align-items: stretch;
     }

     #kameraDetayModal .video-container-wrapper {
         width: 100%;
         height: 100%;
         min-height: 300px;
         display: flex;
         position: relative;
     }

     .camera-iframe-responsive {
         width: 100%;
         height: 100%;
         min-height: 300px;
     }

     #kameraDetayModal .modal-footer {
         padding: 12px 16px;
         flex-direction: column;
         gap: 8px;
         flex-shrink: 0;
     }

     #kameraDetayModal .modal-footer .btn {
         width: 100%;
         justify-content: center;
         padding: 12px 20px;
     }

     #wifiDetayModal .modal-dialog {
         margin: 10px;
         max-width: calc(100% - 20px);
     }

     #wifiDetayModal .modal-content {
         border-radius: var(--radius-lg);
     }

     #wifiDetayModal .modal-header {
         padding: 16px;
     }

     #wifiDetayModal .modal-header .modal-title {
         font-size: 16px;
         gap: 8px;
     }

     #wifiDetayModal .modal-header .modal-title i {
         font-size: 18px;
     }

     #wifiDetayModal .modal-body {
         padding: 16px !important;
     }

     #wifiDetayModal .modal-footer {
         padding: 12px 16px;
         flex-direction: column;
         gap: 8px;
     }

     #wifiDetayModal .modal-footer .btn {
         width: 100%;
         justify-content: center;
         padding: 12px 20px;
     }
 }

 @media (max-width: 576px) {
     #kameraDetayModal .modal-header {
         padding: 12px;
     }

     #kameraDetayModal .modal-header .modal-title {
         font-size: 14px;
     }

     #kameraDetayModal .video-container-wrapper {
         min-height: 250px;
     }

     .camera-iframe-responsive {
         min-height: 250px;
     }

     #kameraDetayModal .modal-footer {
         padding: 10px 12px;
     }

     #kameraDetayModal .modal-footer .btn {
         padding: 10px 16px;
         font-size: 14px;
     }

     #wifiDetayModal .modal-dialog {
         margin: 5px;
         max-width: calc(100% - 10px);
     }

     #wifiDetayModal .modal-header {
         padding: 12px;
     }

     #wifiDetayModal .modal-header .modal-title {
         font-size: 14px;
     }

     #wifiDetayModal .modal-body {
         padding: 12px !important;
     }

     #wifiDetayModal .modal-footer {
         padding: 10px 12px;
     }

     #wifiDetayModal .modal-footer .btn {
         padding: 10px 16px;
         font-size: 14px;
     }
 }

 .modern-stats-container {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     padding: 24px;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
     backdrop-filter: blur(10px);
     border-radius: var(--radius-xl);
     box-shadow: 0 8px 32px rgba(10, 61, 98, 0.08), 0 2px 8px rgba(10, 61, 98, 0.04);
     margin-bottom: 30px;
     border: 1px solid rgba(10, 61, 98, 0.06);
 }

 .stats-cards-wrapper {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
     flex: 1;
 }

 .stat-card-modern {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 20px 24px;
     background: var(--bg-card);
     border-radius: var(--radius-lg);
     box-shadow: 0 4px 16px rgba(10, 61, 98, 0.08);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border: 1px solid rgba(10, 61, 98, 0.06);
     min-width: 200px;
     position: relative;
     overflow: hidden;
 }

 .stat-card-modern::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 4px;
     height: 100%;
     background: linear-gradient(180deg, var(--stat-color) 0%, var(--stat-color-light) 100%);
     transition: width 0.3s ease;
 }

 .stat-card-modern:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(10, 61, 98, 0.12);
 }

 .stat-card-modern:hover::before {
     width: 6px;
 }

 .stat-card-camera {
     --stat-color: var(--primary-color);
     --stat-color-light: var(--primary-light);
 }

 .stat-card-wifi {
     --stat-color: var(--accent-color);
     --stat-color-light: #27ae60;
 }

 .stat-icon-wrapper {
     width: 56px;
     height: 56px;
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--stat-color) 0%, var(--stat-color-light) 100%);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     transition: transform 0.3s ease;
     flex-shrink: 0;
 }

 .stat-card-modern:hover .stat-icon-wrapper {
     transform: scale(1.1) rotate(5deg);
 }

 .stat-icon-wrapper i {
     font-size: 24px;
     color: white;
 }

 .stat-content {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .stat-number-modern {
     font-size: 32px;
     font-weight: 800;
     color: var(--stat-color);
     line-height: 1;
     font-family: 'Segoe UI', system-ui, sans-serif;
 }

 .stat-label-modern {
     font-size: 14px;
     font-weight: 600;
     color: var(--text-medium);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .view-toggle-modern {
     display: flex;
     background: var(--bg-light);
     border-radius: var(--radius-lg);
     padding: 6px;
     gap: 6px;
     box-shadow: inset 0 2px 4px rgba(10, 61, 98, 0.06);
     border: 1px solid rgba(10, 61, 98, 0.08);
 }

 .view-toggle-btn-modern {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 12px 20px;
     border: none;
     background: transparent;
     border-radius: var(--radius-md);
     font-size: 14px;
     font-weight: 600;
     color: var(--text-medium);
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     white-space: nowrap;
 }

 .view-toggle-btn-modern:hover {
     color: var(--primary-color);
     background: rgba(10, 61, 98, 0.05);
 }

 .view-toggle-btn-modern.active {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
     color: white;
     box-shadow: 0 4px 12px rgba(10, 61, 98, 0.25);
     transform: translateY(-1px);
 }

 .view-toggle-btn-modern.active i {
     color: white;
 }

 .view-toggle-btn-modern i {
     font-size: 16px;
     transition: transform 0.3s ease;
 }

 .view-toggle-btn-modern:hover i {
     transform: scale(1.1);
 }

 @media (max-width: 992px) {
     .modern-stats-container {
         flex-direction: column;
         align-items: stretch;
     }

     .stats-cards-wrapper {
         justify-content: center;
     }

     .view-toggle-modern {
         width: 100%;
         justify-content: center;
     }
 }

 @media (max-width: 768px) {
     .modern-stats-container {
         padding: 16px;
         gap: 16px;
     }

     .stats-cards-wrapper {
         flex-direction: row;
         width: 100%;
         gap: 12px;
     }

     .stat-card-modern {
         flex: 1;
         min-width: 0;
         padding: 12px 16px;
         gap: 10px;
     }

     .stat-number-modern {
         font-size: 20px;
     }

     .stat-label-modern {
         font-size: 11px;
     }

     .stat-icon-wrapper {
         width: 40px;
         height: 40px;
         flex-shrink: 0;
     }

     .stat-icon-wrapper i {
         font-size: 18px;
     }

     .stat-content {
         gap: 2px;
     }

     .view-toggle-modern {
         width: 100%;
     }

     .view-toggle-btn-modern {
         flex: 1;
         padding: 10px 16px;
         font-size: 13px;
     }
 }

 @media (max-width: 576px) {
     .modern-stats-container {
         padding: 12px;
         border-radius: var(--radius-lg);
         gap: 12px;
     }

     .stats-cards-wrapper {
         gap: 8px;
     }

     .stat-card-modern {
         padding: 10px 12px;
         gap: 8px;
     }

     .stat-number-modern {
         font-size: 18px;
     }

     .stat-label-modern {
         font-size: 10px;
     }

     .stat-icon-wrapper {
         width: 36px;
         height: 36px;
     }

     .stat-icon-wrapper i {
         font-size: 16px;
     }

     .view-toggle-btn-modern {
         padding: 8px 10px;
         font-size: 12px;
         gap: 6px;
     }

     .view-toggle-btn-modern span {
         display: none;
     }

     .view-toggle-btn-modern i {
         font-size: 18px;
     }
 }

 /* Loading States - SehirKameralariYeni.cshtml'den */
 .loader-ring {
     display: inline-block;
     width: 40px;
     height: 40px;
 }

 .loader-ring:after {
     content: " ";
     display: block;
     width: 32px;
     height: 32px;
     margin: 4px;
     border-radius: 50%;
     border: 2px solid var(--primary-color);
     border-color: var(--primary-color) transparent var(--primary-color) transparent;
     animation: ring 1.2s linear infinite;
 }

 @keyframes ring {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .loading-container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     width: 100%;
     background: #000;
     color: var(--primary-color);
 }

 /* ═══════════════════════════════════════════════════════════════
                       SAYFA BAŞLIĞI
                    ═══════════════════════════════════════════════════════════════ */
 .page-title-container {
     /*padding: 40px 0 20px 0;*/
     text-align: center;
     background: transparent;
 }

 .page-title {
     font-size: 36px;
     font-weight: 800;
     color: #2c3e50;
     position: relative;
     display: inline-block;
     padding-bottom: 15px;
     font-family: 'Outfit', sans-serif;
     letter-spacing: -0.5px;
 }

 .page-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 6px;
     background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
     border-radius: 3px;
 }

 .page-title i {
     margin-right: 15px;
     color: var(--primary-color);
     font-size: 32px;
     vertical-align: middle;
 }

 @media (max-width: 768px) {
     .page-title {
         font-size: 26px;
     }

     .page-title i {
         font-size: 24px;
     }

     .page-title-container {
         padding: 20px 0 10px 0;
     }
 }

 /* ═══════════════════════════════════════════════════════════════
                       HARİTA İSTATİSTİK OVERLAY
                    ═══════════════════════════════════════════════════════════════ */
 .map-overlay-container {
     position: absolute;
     top: 30px;
     left: 40px;
     z-index: 1000;
     /* Haritanın üzerinde */
     display: flex;
     gap: 16px;
     pointer-events: none;
     /* Altındaki haritaya tıklanabilsin */
 }

 .map-stats-card {
     background: white;
     border-radius: 12px;
     padding: 5px 20px 5px 5px;
     display: flex;
     align-items: center;
     gap: 16px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     pointer-events: auto;
     /* Kartlara tıklanabilsin (gerekirse) */
     /* min-width: 220px; */
     transition: transform 0.2s ease;
 }

 .map-stats-card:hover {
     transform: translateY(-2px);
 }

 .map-stats-card.camera-card {
     border-left: 5px solid var(--primary-color);
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .map-stats-card.wifi-card {
     border-left: 5px solid var(--primary-color);
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .map-stats-card.inactive {
     opacity: 0.5;
     transform: scale(0.95);
     box-shadow: none;
 }

 .map-stats-icon {
     width: 48px;
     height: 48px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .camera-card .map-stats-icon {
     background-color: var(--primary-color);
     color: white;
 }

 .wifi-card .map-stats-icon {
     background-color: var(--accent-color);
     color: white;
 }

 .map-stats-icon i {
     font-size: 20px;
 }

 .map-stats-info {
     display: flex;
     flex-direction: column;
 }

 .map-stats-count {
     font-size: 28px;
     font-weight: 800;
     line-height: 1;
     font-family: 'Segoe UI', system-ui, sans-serif;
 }

 .camera-card .map-stats-count {
     color: var(--primary-color);
 }

 .wifi-card .map-stats-count {
     color: var(--accent-color);
 }

 .map-stats-label {
     font-size: 11px;
     font-weight: 700;
     color: #7f8c8d;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 @media (max-width: 768px) {
     .map-overlay-container {
     /*     top: auto; */
         top: 10px;
         /* Altta sabit */
         left: 50%;
         transform: translateX(-50%);
         /* Ortala */
         right: auto;
         flex-direction: row;
         justify-content: center;
         overflow-x: visible;
         padding-bottom: 0;
         gap: 12px;
         width: auto;
     }

     .map-stats-card {
         min-width: auto;
         padding: 8px 16px;
         /* Daha kompakt */
         gap: 8px;
         flex: initial;
         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
     }

     .map-stats-icon {
         width: 32px;
         height: 32px;
         border-radius: 8px;
     }

     .map-stats-icon i {
         font-size: 14px;
     }

     .map-stats-count {
         font-size: 20px;
     }

     .map-stats-label {
         display: none;
         /* Mobilde yazıyı gizle */
     }
 }


 /* ═══════════════════════════════════════════════════════════════
                       MODERN MAP CONTROLS
                    ═══════════════════════════════════════════════════════════════ */
 .ol-control button {
     background-color: #ffffff !important;
     color: #2c3e50 !important;
     border-radius: 8px !important;
     width: 26px !important;
     height: 26px !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
     transition: all 0.2s ease !important;
     font-size: 18px !important;
     font-weight: bold !important;
 }

 .ol-control button:hover {
     background-color: #f8f9fa !important;
     transform: translateY(-1px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
     color: var(--primary-color) !important;
 }

 .ol-control button:focus {
     outline: none !important;
     background-color: #ffffff !important;
 }

 /* Zoom Controls (Moved to Top-Left) */
 .ol-zoom {
     top: 10px !important;
     /* left: 20px !important; */
     right: auto !important;
     bottom: auto !important;
     background: transparent !important;
     padding: 0 !important;
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .ol-zoom:hover {
     background: transparent !important;
 }

 /* Fullscreen Control (Moved to Bottom-Right) */
 .ol-full-screen {
     top: auto !important;
     left: auto !important;
     right: 10px !important;
     bottom: 10px !important;
     background: transparent !important;
     padding: 0 !important;
 }

 /* Attribution (Hidden) */
 .ol-attribution {
     display: none !important;
 }

 /* ═══════════════════════════════════════════════════════════════
                       CUSTOM LAYER SWITCHER
                    ═══════════════════════════════════════════════════════════════ */
 /* ═══════════════════════════════════════════════════════════════
                       CUSTOM LAYER SWITCHER (COLLAPSIBLE)
                    ═══════════════════════════════════════════════════════════════ */
 .layer-switcher-container {
     position: absolute;
     top: 20px;
     /* Moved to Top-Right */
     right: 20px;
     /* Moved to Top-Right */
     bottom: auto;
     left: auto;
     z-index: 1000;
     display: flex;
     flex-direction: column;
     /* Button at top, menu below */
     align-items: flex-end;
     /* Align to right */
     gap: 10px;
 }

 .layer-toggle-btn {
     width: 48px;
     height: 48px;
     background: white;
     border: none;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     color: #2c3e50;
     font-size: 20px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s ease;
 }

 .layer-toggle-btn:hover {
     transform: translateY(-2px);
     color: var(--primary-color);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 }

 .layer-toggle-btn.active {
     background-color: var(--primary-color);
     color: white;
 }

 .custom-layer-switcher {
     position: static;
     /* Controlled by container flex */
     display: flex;
     flex-direction: column;
     /* Stack vertically for top-right menu */
     gap: 8px;
     background: white;
     padding: 6px;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     /* Slide down from top */
     transition: all 0.3s ease;
 }

 .custom-layer-switcher.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .layer-option {
     width: 56px;
     height: 56px;
     border-radius: 8px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     border: 2px solid transparent;
     transition: all 0.2s ease;
 }

 .layer-option.active {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 2px rgba(10, 61, 98, 0.2);
 }

 .layer-preview {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     padding-bottom: 4px;
 }

 .layer-preview span {
     font-size: 10px;
     font-weight: bold;
     color: white;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
     z-index: 2;
 }

 /* Simulated Map Styles */
 .preview-map {
     background: url('/img/aykomePin/yol.PNG') center/cover no-repeat;
     background-color: #e8e8e8;
     /* Fallback */
 }

 /* Fallback if image fails or for better look */
 .preview-map::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.3));
 }

 .preview-sat {
     background: url('https://mt1.google.com/vt/lyrs=y&x=19858&y=16400&z=15') center/cover no-repeat;
 }

 .preview-sat::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.3));
 }

 @media (max-width: 768px) {
     .layer-switcher-container {
         top: 16px;
         right: 16px;
         bottom: auto;
         left: auto;
     }

     /* Zoom & Fullscreen on mobile: Adjust if needed or keep bottom-left */
     .ol-zoom {
         bottom: 80px;
         left: 10px;
     }

     .ol-full-screen {
         bottom: 30px;
         left: 10px;
     }

     .layer-toggle-btn {
         width: 40px;
         height: 40px;
         font-size: 18px;
     }

     .layer-option {
         width: 48px;
         height: 48px;
     }

     .layer-preview span {
         font-size: 9px;
     }
 }

 /* ═══════════════════════════════════════════════════════════════
                     FULLSCREEN WRAPPER STYLES
    ═══════════════════════════════════════════════════════════════ */
 .map-main-wrapper {
     position: relative;
     width: 100%;
 }

 /* Standard */
 .map-main-wrapper:fullscreen {
     background-color: white;
     width: 100vw;
     height: 100vh;
 }

 .map-main-wrapper:fullscreen .map-element {
     height: 100vh !important;
     margin-top: 0 !important;
     border-radius: 0 !important;
     width: 100% !important;
     box-shadow: none !important;
 }

 /* Webkit (Chrome, Safari, Edge) */
 .map-main-wrapper:-webkit-full-screen {
     background-color: white;
     width: 100vw;
     height: 100vh;
 }

 .map-main-wrapper:-webkit-full-screen .map-element {
     height: 100vh !important;
     margin-top: 0 !important;
     border-radius: 0 !important;
     width: 100% !important;
     box-shadow: none !important;
 }

 /* Firefox */
 .map-main-wrapper:-moz-full-screen {
     background-color: white;
     width: 100vw;
     height: 100vh;
 }

 .map-main-wrapper:-moz-full-screen .map-element {
     height: 100vh !important;
     margin-top: 0 !important;
     border-radius: 0 !important;
     width: 100% !important;
     box-shadow: none !important;
 }

 /* IE/Edge Legacy */
 .map-main-wrapper:-ms-fullscreen {
     background-color: white;
     width: 100vw;
     height: 100vh;
 }

.map-main-wrapper:-ms-fullscreen .map-element {
    height: 100vh !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

/* Liste Görünümü Butonu */
.page-title-with-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.page-title-with-button .page-title {
    margin: 0;
}

.list-view-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.list-view-button:hover {
    background: #0a5d8a;
    border-color: #0a5d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 61, 98, 0.3);
}

.list-view-button:active {
    transform: translateY(0);
}

.list-view-icon {
    width: 20px;
    height: 20px;
    color: #fff;
}

.list-view-button span {
    color: #fff;
}

@media (max-width: 768px) {
    .page-title-with-button {
        flex-direction: column;
        gap: 1rem;
    }
    
    .list-view-button {
        width: 100%;
        justify-content: center;
    }
}