:root {
  /* Light Mode Colors */
  --evo-bg-main: #F8FAFC;
  --evo-bg-card: #FFFFFF;
  --evo-text-main: #0F172A;
  --evo-text-secondary: #64748B;
  --evo-primary: #2563EB;
  --evo-accent: #0EA5E9;
  --evo-border: #E2E8F0;

  /* Bootstrap Override Compatibility */
  --bs-body-bg: var(--evo-bg-main);
  --bs-body-color: var(--evo-text-main);
  --bs-primary: var(--evo-primary);
}

[data-bs-theme="dark"] {
  /* Dark Mode Colors */
  --evo-bg-main: #0F172A;
  --evo-bg-card: #1E293B;
  --evo-text-main: #F1F5F9;
  --evo-text-secondary: #94A3B8;
  --evo-primary: #3B82F6;
  --evo-accent: #38BDF8;
  --evo-border: #334155;

  /* Bootstrap Override Compatibility */
  --bs-body-bg: var(--evo-bg-main);
  --bs-body-color: var(--evo-text-main);
  --bs-primary: var(--evo-primary);
  --bs-border-color: var(--evo-border);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  background-color: var(--evo-bg-main);
  color: var(--evo-text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography & Colors */
.text-secondary-evo {
  color: var(--evo-text-secondary) !important;
}

.bg-evo-card {
  background-color: var(--evo-bg-card) !important;
}

/* Custom Grayscale for logos */
.grayscale-logos img {
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.grayscale-logos img:hover {
  filter: grayscale(0%);
  opacity: 1 !important;
}

/* Float animation for Hero Image */
@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

.float-animation {
  animation: float 6s ease-in-out infinite;
}

/* Card Styles */
.card {
  background-color: var(--evo-bg-card);
  border: 1px solid var(--evo-border);
  color: var(--evo-text-main);
  transition: all 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
  transform: translateY(-5px);
}

[data-bs-theme="dark"] .hover-shadow:hover {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3) !important;
}

.transition-all {
  transition: all 0.3s ease;
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: var(--evo-text-main);
}

/* Navbar specific */
.navbar {
  background-color: var(--evo-bg-card) !important;
  border-bottom: 1px solid var(--evo-border);
}

/* Hover Dropdown (Desktop only) */
@media (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Mega Menu / Wide Dropdown */
.dropdown-menu {
  background-color: var(--evo-bg-card);
  border: 1px solid var(--evo-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.dropdown-menu-wide {
  min-width: 600px;
  padding: 1.5rem;
  border-radius: 1rem;
}

.dropdown-item {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
  color: var(--evo-text-main);
}

.dropdown-item:hover {
  background-color: var(--evo-bg-main);
  color: var(--evo-primary);
  transform: translateX(2px);
}

/* Hero Section */
.hero-section {
  background-color: var(--evo-bg-main);
}

[data-bs-theme="dark"] .hero-section {
  background: linear-gradient(135deg, var(--evo-bg-main) 0%, var(--evo-bg-card) 100%) !important;
}

/* Blog Content Specific (for DB and Rich Text) */
.blog-content {
  color: var(--evo-text-main);
}

[data-bs-theme="dark"] .blog-content {
  color: #e2e8f0;
  /* Slightly lighter gray for long text readability */
}

.blog-content p,
.blog-content span,
.blog-content div {
  color: inherit !important;
  /* Force override legacy inline styles if any */
}

.blog-content a {
  color: var(--evo-primary);
  text-decoration: underline;
}

[data-bs-theme="dark"] .blog-content blockquote {
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--evo-primary);
  padding: 1.5rem;
  color: var(--evo-text-secondary);
}

[data-bs-theme="dark"] .list-group-item {
  background-color: transparent;
  border-color: var(--evo-border);
  color: var(--evo-text-main);
}

[data-bs-theme="dark"] .list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}


/* Utility Classes */
.border-evo {
  border-color: var(--evo-border) !important;
}

.btn-primary {
  background-color: var(--evo-primary);
  border-color: var(--evo-primary);
}

.btn-primary:hover {
  background-color: var(--evo-accent);
  border-color: var(--evo-accent);
}

/* Scroll to Top Button */
#scrollToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background-color: var(--evo-primary);
  border: none;
  color: white;
}

#scrollToTop.show {
  opacity: 1;
  visibility: visible;
}

#scrollToTop:hover {
  background-color: var(--evo-accent);
  transform: translateY(-5px);
}

/* LazyLoading Styles */
.lazyload,
.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 300ms;
}

/* Blog Search & Categories Redesign */
.blog-search-wrapper {
  position: relative;
  margin-bottom: 2rem;
}

.blog-search-wrapper i {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--evo-text-secondary);
  opacity: 0.5;
}

.blog-search-input {
  padding: 0.8rem 1rem 0.8rem 3rem !important;
  border-radius: 1rem !important;
  border: 1px solid var(--evo-border) !important;
  background: var(--evo-bg-card) !important;
  transition: all 0.3s ease !important;
  width: 100%;
}

.blog-search-input:focus {
  outline: none;
  border-color: var(--evo-primary) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
}

.cat-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0.75rem;
  background: var(--evo-bg-card);
  border: 1px solid var(--evo-border);
  border-radius: 1.25rem;
  text-decoration: none !important;
  color: var(--evo-text-main) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

.cat-item i {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  transition: transform 0.3s ease;
  color: var(--evo-primary);
}

.cat-item:hover {
  background: var(--evo-primary);
  border-color: var(--evo-primary);
  color: white !important;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

.cat-item:hover i {
  transform: scale(1.1);
  color: white !important;
}

.cat-count {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: 0.25rem;
}

@media (max-width: 991px) {
  .category-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    padding: 0.5rem 0.5rem 1.5rem 0.5rem;
    margin-bottom: 1.5rem;
    gap: 0.75rem;
    scrollbar-width: none;
  }

  .category-scroll-wrapper::-webkit-scrollbar {
    display: none;
  }

  .cat-item {
    min-width: 120px;
    flex-shrink: 0;
  }
}

/* Related Posts Sidebar Styles */
.related-post-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--evo-border);
  text-decoration: none !important;
  color: inherit;
  transition: all 0.3s ease;
}

.related-post-item:last-child {
  border-bottom: none;
}

.related-post-item:hover {
  transform: translateX(5px);
}

.related-post-thumb {
  width: 80px;
  height: 80px;
  border-radius: 0.75rem;
  object-fit: cover;
  flex-shrink: 0;
}

.related-post-content {
  flex-grow: 1;
}

.related-post-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--evo-text-main);
}

.related-post-excerpt {
  font-size: 0.8rem;
  color: var(--evo-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.8;
}

/* Blog Table of Contents (TOC) Styles */
.toc-wrapper {
  background: var(--evo-bg-card);
  border: 1px solid var(--evo-border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  display: none;
  /* Hidden by default, shown by JS if headings exist */
}

.toc-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  color: var(--evo-text-main);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.toc-header i {
  color: var(--evo-primary);
}

.toc-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.toc-list li {
  margin-bottom: 0.5rem;
}

.toc-list li:last-child {
  margin-bottom: 0;
}

.toc-list a {
  text-decoration: none;
  color: var(--evo-text-secondary);
  font-size: 0.95rem;
  transition: all 0.2s ease;
  display: block;
}

.toc-list a:hover {
  color: var(--evo-primary);
  transform: translateX(5px);
}

.toc-list .toc-h2 {
  font-weight: 600;
  padding-left: 0;
}

.toc-list .toc-h3 {
  padding-left: 1.25rem;
  font-size: 0.9rem;
}

.toc-list .toc-h4 {
  padding-left: 2.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Guide Content Aesthetics & Dark Mode */
.guide-content {
  background: var(--evo-bg-card) !important;
  border: 1px solid var(--evo-border) !important;
  color: var(--evo-text-main);
}

.guide-content .content {
  color: var(--evo-text-secondary);
}

.guide-content .content h1,
.guide-content .content h2,
.guide-content .content h3,
.guide-content .content h4,
.guide-content .content h5,
.guide-content .content h6 {
  color: var(--evo-primary);
  font-weight: 700;
}

.guide-content .content strong,
.guide-content .content b {
  color: var(--evo-text-main);
}

.guide-content header h1 {
  color: var(--evo-text-main);
}

[data-bs-theme="dark"] .guide-content {
  background-color: var(--evo-bg-card) !important;
  border-color: var(--evo-border) !important;
}

[data-bs-theme="dark"] .guide-content .content {
  color: rgba(255, 255, 255, 0.8);
}

[data-bs-theme="dark"] .guide-content .content h1,
[data-bs-theme="dark"] .guide-content .content h2,
[data-bs-theme="dark"] .guide-content .content h3,
[data-bs-theme="dark"] .guide-content .content h4 {
  color: var(--evo-primary);
}

/* Saha Satış Page Styles */
.fw-black {
  font-weight: 900;
}

.ls-n2 {
  letter-spacing: -2px;
}

.ls-n1 {
  letter-spacing: -1px;
}

.ls-1 {
  letter-spacing: 1px;
}

/* Refactored from Orange to Primary/Blue Focus */
.bg-navy {
  background-color: #0c1e35;
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hover-translate-y:hover {
  transform: translateY(-5px);
}

.rotate-3 {
  transform: rotate(3deg);
}

.blur-3xl {
  filter: blur(80px);
}

.grayscale-filter {
  filter: grayscale(1);
}

.text-primary-gradient {
  background: linear-gradient(135deg, var(--evo-primary) 0%, var(--evo-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-mockup-container {
  max-width: 450px;
  margin: 0 auto;
}

.main-device {
  border-width: 8px !important;
}

.notification-pop {
  position: absolute;
  top: 20%;
  right: -30px;
  width: 220px;
  z-index: 5;
}

.icon-box {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.v-step .step-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  font-size: 1.25rem;
}

.pulse-primary {
  animation: pulsePrimary 2s infinite;
  border-radius: 50%;
}

@keyframes pulsePrimary {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }

  /* Using evo-primary equivalent RGB */
  70% {
    box-shadow: 0 0 0 25px rgba(59, 130, 246, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.hardware-card {
  transition: transform 0.3s;
}

.hardware-card:hover {
  transform: scale(1.02);
}

.max-w-700 {
  max-width: 700px;
}

.max-w-800 {
  max-width: 800px;
}

.x-small {
  font-size: 0.75rem;
}

.dot.pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: dotPulse 1.5s infinite;
}

@keyframes dotPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }

  70% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

.animate-float {
  animation: floatImg 4s ease-in-out infinite;
}

@keyframes floatImg {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

/* Dark Mode Overrides */
[data-bs-theme="dark"] .dark-bg-main-dark {
  background-color: #060a16 !important;
}

[data-bs-theme="dark"] .dark-bg-section-alt {
  background-color: #0d1526 !important;
}

[data-bs-theme="dark"] .dark-bg-card {
  background-color: #17243b !important;
}

[data-bs-theme="dark"] .dark-text-light {
  color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .dark-text-gray {
  color: #94a3b8 !important;
}

[data-bs-theme="dark"] .dark-border-dark {
  border-color: rgba(255, 255, 255, 0.05) !important;
}