:root {
          /* Corporate Blue Palette */
          --primary-blue: #0066CC;
          --primary-blue-dark: #004C99;
          --primary-blue-light: #3399FF;
          --secondary-blue: #4A90E2;
          --secondary-blue-light: #71a6e2;
          --accent-blue: #0099FF;
          --navy: #003366;
          --sky-blue: #E6F2FF;
          --ice-blue: #F0F7FF;
          /* Neutral Colors */
          --white: #FFFFFF;
          --off-white: #FAFBFC;
          --light-gray: #F5F7FA;
          --gray-100: #E8ECF1;
          --gray-200: #D1D9E6;
          --gray-300: #B8C5D6;
          --gray-400: #8B98A8;
          --gray-500: #6B7A8F;
          --gray-600: #4A5568;
          --gray-700: #2D3748;
          --gray-800: #1A202C;
          --gray-900: #0F1419;
          /* Status Colors */
          --success: #00C853;
          --success-light: #E8F5E9;
          --warning: #FFA726;
          --warning-light: #FFF3E0;
          --danger: #EF5350;
          --danger-light: #FFEBEE;
          /* Typography */
          --font-primary: 'Titillium Web', -apple-system, BlinkMacSystemFont, sans-serif;
          --font-mono: 'Titillium Web', 'SF Mono', monospace;
      }
      
      * {
          font-family: var(--font-primary);
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      
      body {
          font-family: var(--font-primary), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          background-color: #F1F5F9;
          color: var(--gray-700);
          /* line-height: 1.6; */
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
      }
      /* Boş alanlar temizlendi */
      
      .urun-karti-link {
          transition: all 0.3s ease;
      }
      
      .urun-karti-link:hover {
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
      }
      
      .urun-karti-link:hover .card {
          transform: translateY(-5px);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25) !important;
      }
      /* Mobil Mega Menü Stilleri */
      
      #mobilMegaMenu .accordion-button {
          padding: 1rem 1.25rem;
          font-weight: 500;
          background-color: transparent;
          border: none;
      }
      
      #mobilMegaMenu .accordion-button:not(.collapsed) {
          color: var(--primary-blue);
          background-color: var(--ice-blue);
      }
      
      #mobilMegaMenu .accordion-button:focus {
          box-shadow: none;
          border-color: rgba(0, 0, 0, .125);
      }
      
      #mobilMegaMenu .accordion-item {
          background-color: transparent;
      }
      
      #mobilMegaMenu .nav-link {
          color: var(--gray-600);
          transition: all 0.2s ease-in-out;
      }
      
      #mobilMegaMenu .nav-link:hover {
          color: var(--primary-blue);
          background-color: var(--ice-blue);
      }
      
      #mobilMegaMenu .accordion-button::after {
          width: 1rem;
          height: 1rem;
          background-size: 1rem;
      }
      /* Mega Menu Styles */
      
      .navbar {
          position: relative;
      }
      
      .navbar .dropdown {
          position: static;
      }
      
      .navbar .dropdown-menu {
          left: 0;
          right: 0;
          top: 100%;
          margin: 0;
          padding: 0;
          border: none;
          border-radius: 0;
      }
      
      .navbar .dropdown-menu>.container {
          position: relative;
          padding-top: 2rem;
          padding-bottom: 2rem;
      }
      
      .navbar .nav-link-custom:hover {
          color: var(--white) !important;
          background-color: var(--primary-blue-light) !important;
      }
      
      .navbar .dropdown-menu>hr {
          margin: 0rem 0 !important;
      }
      /* Hover to show dropdown */
      
      .navbar .dropdown:hover .dropdown-menu {
          display: block;
      }
      
      .progress-bar {
          background-color: #0099FF !important;
      }
      
      .banner-reklami {
          width: 100%;
          margin: 0 auto;
          display: block;
          border-radius: 5px;
      }
      /* Offcanvas Menu Hover Effect */
      
      #categoryOffcanvas .list-group-item-action:hover {
          background-color: var(--ice-blue) !important;
          color: var(--primary-blue);
          transition: all 0.2s ease-in-out;
      }
      /* Category Navigation Styles */
      
      .nav-link-custom {
          transition: all 0.3s ease;
          position: relative;
      }
      
      .category-nav {
          background-color: var(--white);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          padding: 0.5rem 0;
      }
      
      .category-nav .nav-link {
          color: var(--gray-700);
          padding: 0.75rem 1rem;
          font-size: 0.95rem;
          font-weight: 500;
          transition: all 0.2s ease;
          border-radius: 0.25rem;
      }
      
      .category-nav .nav-link i {
          margin-right: 0.5rem;
          font-size: 1.1rem;
          vertical-align: -2px;
      }
      
      .category-nav .nav-link:hover {
          color: var(--primary-blue);
          background-color: var(--sky-blue);
          transform: translateY(-1px);
      }
      /* Navbar Toggler Styles */
      
      .navbar-toggler {
          border: 1px solid var(--gray-200);
          padding: 0.5rem 1rem;
          font-size: 0.9rem;
          border-radius: 0.375rem;
          color: var(--gray-700);
          background-color: var(--white);
          transition: all 0.2s ease;
      }
      
      .navbar-toggler:hover {
          background-color: var(--gray-100);
          border-color: var(--gray-300);
      }
      
      .navbar-toggler i {
          margin-right: 0.5rem;
          font-size: 1.2rem;
          vertical-align: -3px;
      }
      /* Offcanvas Styles */
      
      .offcanvas {
          max-width: 300px;
          background-color: var(--white);
      }
      
      .offcanvas-header {
          background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
          padding: 1.25rem 1.5rem;
          color: var(--white);
      }
      
      .offcanvas-title {
          font-size: 1.1rem;
          font-weight: 600;
          letter-spacing: 0.5px;
      }
      
      .offcanvas .btn-close {
          filter: brightness(0) invert(1);
          opacity: 0.8;
          transition: opacity 0.2s;
      }
      
      .offcanvas .btn-close:hover {
          opacity: 1;
      }
      
      .offcanvas .list-group-item {
          color: var(--gray-700);
          padding: 0.875rem 1rem;
          border-radius: 0.375rem;
          transition: all 0.2s ease;
          margin-bottom: 0.25rem;
      }
      
      .offcanvas .list-group-item:hover {
          color: var(--primary-blue);
          background-color: var(--sky-blue);
          transform: translateX(4px);
      }
      
      .offcanvas .list-group-item i {
          margin-right: 0.75rem;
          width: 1.5rem;
          text-align: center;
          font-size: 1.1rem;
      }
      /* Yıldız Konteyner */
      
      .stars-container {
          display: inline-flex;
          gap: 0.3rem;
          font-size: 1.2rem;
      }
      
      .stars-container i {
          cursor: pointer;
          transition: all 0.2s ease;
      }
      
      .stars-container i:hover,
      .stars-container i.active {
          transform: scale(1.1);
          filter: drop-shadow(0 0 3px rgba(255, 193, 7, 0.5));
      }
      /* Değerlendirme Detayları */
      
      .rating-details {
          border-left: 4px solid #ffc107;
      }
      
      .rating-details .progress {
          background-color: #e9ecef;
      }
      
      .rating-details small {
          font-size: 0.85rem;
      }
      /* Responsive */
      
      @media (max-width: 768px) {
          .stars-container {
              font-size: 1rem;
          }
          .rating-details .row>div {
              margin-bottom: 1rem;
          }
      }
      /* Ürün Resim Container */
      /* .urun-resim-container { */
      /* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
      /* } */
      /* Responsive Adjustments */
      
      @media (max-width: 991.98px) {
          .category-nav {
              padding: 0.75rem 0;
          }
          .navbar-toggler {
              margin-left: auto;
          }
      }
      /* Header & Navigation */
      
      .main-header {
          background: var(--white);
          box-shadow: var(--shadow-sm);
          /* position: sticky;*/
          top: 0;
          z-index: 1000;
          border-bottom: 3px solid var(--primary-blue);
      }
      
      .main-header a {
          text-decoration: none;
      }
      
      .logo-section {
          display: flex;
          align-items: center;
          gap: 12px;
      }
      
      .logo-icon {
          width: 48px;
          height: 48px;
          background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: var(--white);
          box-shadow: var(--shadow-md);
      }
      
      .logo-text {
          display: flex;
          flex-direction: column;
      }
      
      .logo-title {
          font-size: 22px;
          font-weight: 800;
          color: var(--navy);
          letter-spacing: -0.5px;
      }
      
      .logo-subtitle {
          font-size: 11px;
          color: var(--gray-500);
          font-weight: 500;
          letter-spacing: 0.5px;
      }
      
      .search-box {
          position: relative;
          width: 100%;
          /*max-width: 500px;*/
      }
      
      .search-box input {
          width: 100%;
          padding: 12px 50px 12px 20px;
          border: 2px solid var(--gray-100);
          border-radius: 50px;
          font-size: 14px;
          transition: all 0.3s ease;
          background: var(--light-gray);
      }
      
      .search-box input:focus {
          outline: none;
          border-color: var(--primary-blue);
          background: var(--white);
          box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
      }
      
      .search-box button {
          position: absolute;
          right: 6px;
          top: 50%;
          transform: translateY(-50%);
          background-color: var(--primary-blue-dark) !important;
          border: none;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          color: var(--white) !important;
          cursor: pointer;
          transition: all 0.3s ease;
      }
      
      .search-box button:hover {
          transform: translateY(-50%) scale(1.05);
          box-shadow: var(--shadow-md);
      }
      
      .header-actions {
          display: flex;
          gap: 15px;
      }
      
      .header-btn {
          padding: 10px 20px;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 600;
          text-decoration: none;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          gap: 8px;
      }
      
      .btn-outline {
          border: 2px solid var(--primary-blue);
          color: var(--primary-blue);
          background: transparent;
      }
      
      .btn-outline:hover {
          background: var(--primary-blue);
          color: var(--white);
      }
      
      .btn-primary-custom {
          background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
          color: var(--white);
          border: none;
      }
      
      .btn-primary-custom:hover {
          transform: translateY(-2px);
          box-shadow: var(--shadow-md);
      }
      /* Category Navigation */
      
      .category-nav {
          background: var(--white);
          border-bottom: 1px solid var(--gray-100);
          box-shadow: var(--shadow-sm);
      }
      
      .category-tab:hover {
          color: var(--primary-blue);
          background: var(--sky-blue);
      }
      
      .category-tab.active {
          color: var(--primary-blue);
          border-bottom-color: var(--primary-blue);
          background: var(--sky-blue);
      }
      
      .category-tab i {
          margin-right: 8px;
      }
      /* Breadcrumb */
      
      .breadcrumb-section {
          background: var(--white);
          padding: 12px 0;
          border-bottom: 1px solid var(--gray-100);
      }
      /* Page Title */
      
      .page-title {
          font-size: 32px;
          font-weight: 800;
          color: var(--navy);
          margin-bottom: 10px;
          letter-spacing: -0.5px;
      }
      /* Animations */
      
      @keyframes slideInFromTop {
          from {
              opacity: 0;
              transform: translateY(-20px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }
      
      @keyframes fadeInScale {
          from {
              opacity: 0;
              transform: scale(0.9);
          }
          to {
              opacity: 1;
              transform: scale(1);
          }
      }
      
      .animate-slide-in {
          animation: slideInFromTop 0.6s ease-out;
      }
      
      .animate-fade-scale {
          animation: fadeInScale 0.6s ease-out;
      }
      /* Temel Özellikler */
      
      .urun-ozellikler-baslik {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 12px 10px;
          text-align: center;
          font-size: 13px;
          color: #555555;
          min-height: 50px;
      }
      /* Breadcrumb Stili */
      
      .breadcrumb-section {
          background-color: #f8f9fa;
          padding: 1rem 0;
          border-bottom: 1px solid #dee2e6;
          margin-bottom: 2rem;
      }
      
      .breadcrumb-fix {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 13px;
          flex-wrap: wrap;
          color: var(--gray-500);
      }
      
      .breadcrumb-fix a {
          color: #0d6efd;
          text-decoration: none;
          transition: color 0.3s;
      }
      
      .breadcrumb-fix a:hover {
          color: #0d6efd;
      }
      
      .breadcrumb-fix .active {
          color: #6c757d;
          font-weight: 500;
      }
      
      .fs1 {
          font-size: 0.600rem !important;
      }
      
      .fs2 {
          font-size: 0.700rem !important;
      }
      
      .fs3 {
          font-size: 0.800rem !important;
      }
      
      .fs4 {
          font-size: 0.900rem !important;
      }
      
      .fs5 {
          font-size: 1rem !important;
      }
      
      .fs6 {
          font-size: 1.1rem !important;
      }
      /* Tablo Stili */
      
      .table tbody tr:hover {
          background-color: #f8f9fa;
      }
      
      .table-hover tbody tr {
          transition: background-color 0.2s ease;
      }
      
      table tbody tr:last-child {
          border-style: none !important;
      }
      /* Badge Stili */
      
      .badge {
          font-size: 0.85rem;
          padding: 0.5rem 0.75rem;
      }
      
      .karsilastirma-tablo-baslik {
          background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
          color: #ffffff !important;
          font-weight: 600;
      }
      
      .karsilastirma-tablo-kategori-baslik {
          background-color: #f0f4f8 !important;
          color: #1f2937 !important;
          font-weight: 500;
      }
      
      .link-dashed-fixed,
      .link-dashed-fixed:link,
      .link-dashed-fixed:visited,
      .link-dashed-fixed:hover,
      .link-dashed-fixed:focus,
      .link-dashed-fixed:focus-visible,
      .link-dashed-fixed:active {
          color: inherit !important;
          text-decoration: none;
      }
      
      .link-dashed-fixed:hover {
          color: var(--primary-blue-light) !important;
      }
  }
  .link-dashed-fixed {
      /*border-bottom: 1px dashed currentColor;
    padding-bottom: 0px;
}


/* Tablo satır stilleri */
      
      .table tr {
          border-bottom: 1px solid #e5e7eb !important;
          transition: all 0.2s ease;
      }
      
      .table th,
      .table td {
          vertical-align: middle;
          padding: 0.5rem;
      }
      
      .table h4 {
          font-size: 1.1rem;
          color: #1f2937;
          margin: 0.5rem 0;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding-bottom: 0.75rem;
          border-bottom: 2px solid #60a5fa;
      }
      /* Cursor Pointer */
      
      .cursor-pointer {
          cursor: pointer;
      }
      /* Responsive Table */
      
      @media (max-width: 768px) {
          .table {
              font-size: 0.85rem;
          }
          .table th,
          .table td {
              padding: 0.5rem;
          }
          .badge {
              font-size: 0.75rem;
          }
      }
      /* Button Styles */
      
      .btn {
          transition: all 0.3s ease;
      }
      
      .btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      /* Karşılaştırma Tablosu CSS */
      
      .comparison-table-wrapper {
          border: 1px solid #dce7f0;
          border-radius: 8px;
          overflow: hidden;
          background: #ffffff;
      }
      
      .comparison-category {
          border-bottom: 1px solid #f0f0f0;
      }
      
      .comparison-category:last-child {
          border-bottom: none;
      }
      /* Kategori Başlığı - 3 kolon (label + 2 ürün) */
      
      .category-header-row {
          background: linear-gradient(90deg, #0066CC 0%, #0099FF 100%);
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 0;
          border-bottom: 2px solid #0052a3;
      }
      
      .category-name {
          color: white;
          font-weight: 700;
          font-size: 14px;
          display: flex;
          align-items: center;
          padding: 16px 12px;
          letter-spacing: 0.3px;
      }
      /* Spec Satırı - 3 kolon */
      
      .spec-row:hover {
          background-color: #f5f9ff;
      }
      
      .spec-row:last-child {
          border-bottom: none;
      }
      /* Özellik Etiketi */
      
      .spec-label {
          font-weight: 600;
          color: #333333;
          font-size: 14px;
          padding: 14px 12px;
          display: flex;
          align-items: center;
          background-color: #fafbfc;
          border-right: 1px solid #dce7f0;
          line-height: 1.4;
      }
      /* Spec Değeri */
      
      .spec-value {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 12px 10px;
          text-align: center;
          font-size: 13px;
          color: #555555;
          background-color: #f8fbff;
          border-right: 1px solid #dce7f0;
          min-height: 50px;
      }
      
      .spec-value:last-child {
          border-right: none;
      }
      
      .spec-value.product-1,
      .spec-value.product-2,
      .spec-value.product-3 {
          background-color: #f8fbff;
      }
      
      .value-text {
          display: block;
          word-break: break-word;
          font-weight: 500;
          line-height: 1.3;
      }
      /* Responsive - Tablet */
      
      @media (max-width: 1024px) {
          .category-header-row,
          .spec-row,
          .header-row {
              grid-template-columns: 1fr 1fr 1fr;
          }
      }
      /* Responsive - Mobile */
      
      @media (max-width: 768px) {
          .comparison-table-wrapper {
              border-radius: 4px;
          }
          .category-header-row,
          .spec-row,
          .header-row {
              grid-template-columns: 100%;
              gap: 0;
          }
          .spec-label {
              grid-column: 1;
              border-right: none;
              border-bottom: 1px solid #dce7f0;
              font-weight: 700;
              padding: 10px 10px;
          }
          .spec-value,
          .header-product {
              grid-column: 1;
              width: 100%;
              border-right: none;
              border-bottom: 1px solid #f0f0f0;
          }
          .category-name,
          .header-label {
              grid-column: 1;
              border-right: none;
          }
          .category-name {
              padding: 12px 10px;
              font-size: 13px;
          }
          .product-header-content {
              font-size: 0.75rem;
          }
          .spec-value {
              min-height: auto;
              padding: 10px;
          }
      }
      /* Toggle Farkları Göster */
      
      .spec-row.hidden {
          display: none;
      }
      
      .category-header-row.hidden {
          display: none;
      }
      /* Button Stilleri */
      
      #tooglefarkbuton {
          position: fixed;
          bottom: 2rem;
          right: 2rem;
          z-index: 1000;
          padding: 10px 16px;
          font-size: 13px;
          font-weight: 600;
          color: white;
          background-color: #0066CC;
          border: 1px solid #0066CC;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
      
      #tooglefarkbuton:hover {
          background-color: #0052a3;
          border-color: #0052a3;
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
          transform: translateY(-2px);
      }
      
      #tooglefarkbuton.active {
          background-color: #28a745;
          border-color: #28a745;
      }
      
      @media (max-width: 768px) {
          #tooglefarkbuton {
              bottom: 1rem;
              right: 1rem;
              padding: 8px 14px;
              font-size: 12px;
          }
      }
      /* Başlık Stili */
      
      .comparison-header {
          margin-bottom: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      
      .comparison-header h4 {
          font-size: 18px;
          font-weight: 700;
          color: #333333;
          margin: 0;
      }
      
      .comparison-header i {
          color: #0066CC;
      }