/* Tab System Styles */
     .view-tabs {
         display: flex;
         justify-content: center;
         margin-bottom: 30px;
         background: #f8f9fa;
         border-radius: 15px;
         padding: 5px;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     }

     .view-tabs .tab-btn {
         flex: 1;
         max-width: 200px;
         padding: 15px 25px;
         border: none;
         background: transparent;
         border-radius: 10px;
         font-size: 16px;
         font-weight: 600;
         color: #666;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
     }

     .view-tabs .tab-btn:hover {
         background: rgba(229, 81, 0, 0.1);
         color: #e55100;
     }

     .view-tabs .tab-btn.active {
         background: linear-gradient(135deg, #e55100, #f5c0ac);
         color: white;
         box-shadow: 0 4px 15px rgba(229, 81, 0, 0.3);
     }

     .view-tabs .tab-btn i {
         font-size: 18px;
     }

     .tab-content {
         display: none;
     }

     .tab-content.active {
         display: block;
     }

     /* Map Styles */
     .map-container {
         position: relative;
         background: white;
         border-radius: 15px;
         overflow: hidden;
         box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     }

     .map-info-panel {
         position: absolute;
         top: 20px;
         left: 20px;
         background: white;
         border-radius: 10px;
         padding: 20px;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         z-index: 1000;
         max-width: 300px;
     }

     .map-info-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 15px;
     }

     .map-info-header h3 {
         margin: 0;
         font-size: 18px;
         font-weight: 600;
         color: #333;
     }

     .map-branch-count {
         font-size: 14px;
         color: #666;
         background: #f8f9fa;
         padding: 5px 10px;
         border-radius: 15px;
     }

     .map-filters {
         display: flex;
         flex-direction: column;
         gap: 10px;
     }

     .map-select {
         width: 100%;
         padding: 10px 15px;
         border: 2px solid #e9ecef;
         border-radius: 8px;
         font-size: 14px;
         background: white;
         transition: all 0.3s ease;
     }

     .map-select:focus {
         outline: none;
         border-color: #e55100;
         box-shadow: 0 0 0 3px rgba(229, 81, 0, 0.1);
     }

     .filter-section {
         padding: 25px;
         background: #64646440;
         border-bottom: 1px solid #e9ecef;
         border-top-right-radius: 20px;
         border-top-left-radius: 20px;
     }

     .filter-input {
         width: 100%;
         padding: 15px 20px;
         border: 2px solid #e9ecef;
         border-radius: 50px;
         font-size: 16px;
         transition: all 0.3s ease;
         background: white;
     }

     .filter-input:focus {
         outline: none;
         border-color: #fadfd5;
         box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
     }

     .location-btn {
         position: absolute;
         left: 15px;
         top: 50%;
         transform: translateY(-50%);
         width: 40px;
         height: 40px;
         border: none;
         border-radius: 50%;
         background: linear-gradient(135deg, #e55100, #f5c0ac);
         color: white;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 16px;
         z-index: 10;
         box-shadow: 0 2px 10px rgba(229, 81, 0, 0.3);
     }

     .location-btn:hover {
         background: linear-gradient(135deg, #d14900, #e55100);
         transform: translateY(-50%) scale(1.1);
         box-shadow: 0 4px 15px rgba(229, 81, 0, 0.4);
     }

     .location-btn:active {
         transform: translateY(-50%) scale(0.95);
     }

     .location-btn.loading {
         animation: spin 1s linear infinite;
     }

     .location-btn.success {
         background: linear-gradient(135deg, #27ae60, #2ecc71);
     }

     .location-btn.error {
         background: linear-gradient(135deg, #e74c3c, #c0392b);
     }

     @keyframes spin {
         0% {
             transform: translateY(-50%) rotate(0deg);
         }

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

     .location-status {
         position: absolute;
         right: 15px;
         top: 50%;
         transform: translateY(-50%);
         font-size: 12px;
         color: #666;
         background: rgba(255, 255, 255, 0.9);
         padding: 5px 10px;
         border-radius: 15px;
         display: none;
         z-index: 10;
         border: 1px solid #e9ecef;
         font-weight: 500;
         white-space: nowrap;
     }

     .location-status.info {
         color: #3498db;
         background: rgba(52, 152, 219, 0.1);
         border-color: #3498db;
     }

     .location-status.success {
         color: #27ae60;
         background: rgba(39, 174, 96, 0.1);
         border-color: #27ae60;
     }

     .location-status.warning {
         color: #f39c12;
         background: rgba(243, 156, 18, 0.1);
         border-color: #f39c12;
     }

     .location-status.error {
         color: #e74c3c;
         background: rgba(231, 76, 60, 0.1);
         border-color: #e74c3c;
     }

     .content {
         display: grid;
         grid-template-columns: 300px 1fr;
         min-height: 600px;
     }

     .sidebar {
         background: #f8f9fa;
         border-right: 1px solid #e9ecef;
         padding: 25px;

         max-height: 800px;
         overflow-y: scroll;
     }

     .sidebar h3 {
         color: #2c3e50;
         margin-bottom: 20px;
         font-size: 1.3em;
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .city-list {
         list-style: none;
     }

     .city-item {
         padding: 15px 20px;
         margin-bottom: 10px;
         border-radius: 12px;
         cursor: pointer;
         transition: all 0.3s ease;
         background: white;
         border: 2px solid transparent;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     }

     .city-item:hover {
         background: #e55100d4;
         color: white;
         transform: translateY(-2px);
         box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
     }

     .city-item.active {
         background: #2c3e50;
         color: white;
         border-color: #34495e;
     }

     .city-count {
         float: right;
         background: rgba(255, 255, 255, 0.2);
         padding: 3px 8px;
         border-radius: 12px;
         font-size: 0.9em;
     }

     .branches-section {
         padding: 25px;
         background: white;
         max-height: 800px;
         overflow-y: scroll;
     }

     .branches-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 25px;
     }

     .branches-header h3 {
         color: #2c3e50;
         font-size: 1.4em;
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .branch-count {
         background: linear-gradient(135deg, #e55100, #f5c0ac);
         color: white;
         padding: 8px 16px;
         border-radius: 20px;
         font-size: 0.9em;
         font-weight: 500;
     }

     .branches-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         gap: 20px;
     }

     .branch-card {
         background: white;
         border-radius: 16px;
         padding: 25px;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
         border: 1px solid #f1f3f4;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
     }

     .branch-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
     }

     .branch-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 4px;
         background: linear-gradient(90deg, #e55100, #f5c0ac);
     }

     .branch-name {
         font-size: 1.3em;
         font-weight: 600;
         color: #2c3e50;
         margin-bottom: 15px;
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .branch-info {
         margin-bottom: 20px;
     }

     .info-item {
         display: flex;
         align-items: flex-start;
         gap: 10px;
         margin-bottom: 12px;
         color: #555;
         line-height: 1.5;
     }

     .info-icon {
         width: 18px;
         height: 18px;
         margin-top: 2px;
         color: #3498db;
     }

     .branch-actions {
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
     }

     .action-btn {
         padding: 10px 16px;
         border: none;
         border-radius: 25px;
         cursor: pointer;
         font-size: 0.9em;
         font-weight: 500;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         gap: 6px;
         text-decoration: none;
         color: white;
     }

     .action-btn:hover {
         color: white !important;
     }

     .btn-call {
         background: linear-gradient(135deg, #27ae60, #2ecc71);
     }

     .btn-call:hover {
         background: linear-gradient(135deg, #229954, #27ae60);
         transform: scale(1.05);
     }

     .btn-directions {
         background: linear-gradient(135deg, #f39c12, #e67e22);
     }

     .btn-directions:hover {
         background: linear-gradient(135deg, #e67e22, #d35400);
         transform: scale(1.05);
     }

     .btn-website {
         background: linear-gradient(135deg, #9b59b6, #8e44ad);
     }

     .btn-website:hover {
         background: linear-gradient(135deg, #8e44ad, #7d3c98);
         transform: scale(1.05);
     }

     .utts-badge {
         position: absolute;
         top: 15px;
         right: 15px;
         background: linear-gradient(135deg, #e74c3c, #c0392b);
         color: white;
         padding: 8px 12px;
         border-radius: 20px;
         font-size: 0.8em;
         font-weight: 500;
         animation: pulse 2s infinite;
     }

     @keyframes pulse {

         0%,
         100% {
             transform: scale(1);
         }

         50% {
             transform: scale(1.05);
         }
     }

     .no-results {
         text-align: center;
         padding: 60px 20px;
         color: #7f8c8d;
     }

     .no-results-icon {
         width: 80px;
         height: 80px;
         margin: 0 auto 20px;
         opacity: 0.5;
     }

     @media (max-width: 768px) {
         .content {
             grid-template-columns: 1fr;
         }

         .sidebar {
             border-right: none;
             border-bottom: 1px solid #e9ecef;
         }

         .city-list {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
             gap: 10px;
         }

         .city-item {
             text-align: center;
             padding: 12px;
         }

         .branches-grid {
             grid-template-columns: 1fr;
         }

         .branch-card {
             padding: 20px;
         }

         .branch-actions {
             justify-content: center;
         }

         .location-btn {
             width: 35px;
             height: 35px;
             font-size: 14px;
             left: 12px;
         }

         .filter-input {
             font-size: 14px;
             padding: 12px 50px 12px 55px;
         }

         .location-status {
             font-size: 11px;
             padding: 4px 8px;
             right: 12px;
         }

         .city-list-wrapper {
             overflow-x: auto;
             white-space: nowrap;
             -webkit-overflow-scrolling: touch;
             /* iOS için yumuşak kaydırma */
         }

         .city-list {
             display: inline-flex;
             flex-wrap: nowrap;
             padding: 0;
             margin: 0;
             list-style: none;
         }

         .city-item {
             display: inline-block;
             white-space: nowrap;
             cursor: pointer;
             flex-shrink: 0;
         }

         .city-count {

             margin-left: 1rem;
         }

         .sidebar {
             margin: 0;
         }

         .utts-badge {
             bottom: 31%;
             right: 0px;
             top: unset;
             width: 44px;
             height: 102px;
             padding: 0.4rem;
             margin: 0;
             display: flex;
             align-items: center;
             justify-content: center;
         }

         .utts-badge img {
             transform: rotate(270deg) !important;
         }

         /* Tab System Responsive */
         .view-tabs {
             flex-direction: column;
             gap: 5px;
         }

         .view-tabs .tab-btn {
             max-width: none;
             padding: 12px 20px;
             font-size: 14px;
         }

         .map-info-panel {
             position: relative;
             top: auto;
             left: auto;
             margin: 20px;
             max-width: none;
         }



         .view-tabs .tab-btn {
             font-size: 13px;
             padding: 10px 15px;
         }

         .view-tabs .tab-btn i {
             font-size: 16px;
         }
     }