html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
/* Dark mode root flag */
.dark-mode {
  color-scheme: dark;
}

/* Basic dark palette overrides */
.dark-mode body {
  background-color: #0e1117;
  color: #c9d1d9;
}

.dark-mode .navbar,
.dark-mode .navbar.backdrop,
.dark-mode .dropdown-menu {
  background-color: rgba(22, 27, 34, 0.9) !important;
  color: #e6edf3;
}

.dark-mode .nav-link,
.dark-mode .dropdown-item {
  color: #c9d1d9 !important;
}
.dark-mode .dropdown-item:hover {
  background-color: #161b22 !important;
  color: #fff !important;
}

.dark-mode .btn-primary { color: #0e1117; }
.dark-mode .btn-outline-secondary { border-color: #3d444d; color: #c9d1d9; }
.dark-mode .btn-outline-secondary:hover { background-color: #30363d; border-color: #8b949e; color: #fff; }

.dark-mode .card, 
.dark-mode .modal-content,
.dark-mode .toast,
.dark-mode .interests-section .interest-card {
  background-color: #161b22;
  color: #e6edf3;
  border-color: #30363d;
}

.dark-mode .text-muted { color: #8b949e !important; }
.dark-mode .form-control,
.dark-mode .form-select {
  background-color: #0e1117;
  color: #e6edf3;
  border-color: #30363d;
}
.dark-mode .form-control::placeholder { color: #8b949e; }

.dark-mode .wishlist-count { background: #ff6a88; color: #0e1117; }

/* Sections backgrounds that are light by default */
.dark-mode .bg-light { background-color: #0e1117 !important; }
.dark-mode .bg-white { background-color: #0e1117 !important; }
.dark-mode .text-dark { color: #e6edf3 !important; }
.dark-mode .text-secondary { color: #a6b3c3 !important; }
.dark-mode .text-body { color: #c3ccd6 !important; }
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 { color: #d0d7de !important; }
.dark-mode .font-cursive { color: #d0d7de !important; }

/* Cards in sections (features, etc.) */
.dark-mode .service-card { background-color: #161b22; border-color: #30363d; }
.dark-mode .service-card h4 { color: #e6edf3 !important; }
.dark-mode .service-card p { color: #c9d1d9 !important; }

/* Footer */
.dark-mode footer { background-color: #0e1117; color: #e6edf3; }

/* Links */
.dark-mode a { color: #9ecbff; }
.dark-mode a:hover { color: #b6d9ff; }

/* Theme switch alignment & visibility */
/* Theme toggle (pill) */
.theme-toggle {
  --toggle-height: 28px;
  --toggle-width: 56px;
  --toggle-padding: 3px;
  --toggle-bg-light: #e9ecef;
  --toggle-bg-dark: #111318;
  --toggle-accent: #3b44f6;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
}
.theme-toggle .toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: var(--toggle-width);
  height: var(--toggle-height);
  padding: 0 var(--toggle-padding);
  border-radius: calc(var(--toggle-height) / 2);
  background: var(--toggle-bg-light);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  transition: background-color .2s ease, box-shadow .2s ease;
}
/* icons (use unique class to avoid conflicts with global .icon) */
.theme-toggle .toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; color: #6c757d; z-index: 1; pointer-events: none; }
.theme-toggle .toggle-icon.sun { color: #f6c61a; }
.theme-toggle .toggle-icon.moon { color: #9aa3b2; }

.theme-toggle .toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--toggle-height) - 6px);
  height: calc(var(--toggle-height) - 6px);
  border-radius: 50%;
  background: #3b44f6;
  box-shadow: 0 8px 14px rgba(59,68,246,0.35);
  transition: left .2s ease, background-color .2s ease, transform .2s ease;
}

/* Active (dark) state will be controlled by [data-color-scheme="dark"] selector */
html[data-color-scheme="dark"] .theme-toggle .toggle-track { background: var(--toggle-bg-dark); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
html[data-color-scheme="dark"] .theme-toggle .toggle-thumb { left: calc(var(--toggle-width) - var(--toggle-height) + 3px); background: var(--toggle-accent); box-shadow: 0 8px 14px rgba(59,68,246,0.45); }
html[data-color-scheme="dark"] .theme-toggle .toggle-icon.sun { color: #8b949e; }
html[data-color-scheme="dark"] .theme-toggle .toggle-icon.moon { color: #c3c9d4; }

/* focus ring */
.theme-toggle:focus-visible .toggle-track { box-shadow: 0 0 0 3px rgba(59,68,246,.35), inset 0 0 0 1px rgba(0,0,0,.25); }

/* FAQ accordions in dark mode */
.dark-mode .accordion-item { background-color: #0f141a; border-radius: 0.75rem; }
.dark-mode .accordion-button { background-color: #0f141a; color: #d0d7de; border: none; }
.dark-mode .accordion-button:not(.collapsed) { color: #e6edf3; background-color: #121820; box-shadow: inset 0 -1px 0 rgba(48,54,61,0.6); }
.dark-mode .accordion-body { background-color: #0f141a; color: #c3ccd6; }
.dark-mode .accordion-button:focus { box-shadow: 0 0 0 0.1rem rgba(201,209,217,0.15); }
.dark-mode .accordion-item, .dark-mode .accordion-button, .dark-mode .accordion-body { border-color: #30363d !important; }


/* Wishlist Floating Action Button */
.wishlist-fab, .wishlist-fab * { box-sizing: border-box; }
.wishlist-fab {
  position: fixed;
  right: 18px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ff6a88 0%, #ff99ac 100%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(255, 106, 136, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2000;
  pointer-events: auto;
}

.wishlist-fab:hover { box-shadow: 0 14px 28px rgba(255, 106, 136, 0.45); }

.wishlist-icon { display: block; pointer-events: none; }

.wishlist-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #212529;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  pointer-events: none;
}

.wishlist-fab:disabled,
.wishlist-fab.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

@media (max-width: 576px) {
  .wishlist-fab {
    width: 46px;
    height: 46px;
    right: 12px;
    bottom: 12px;
  }
}

/* Ensure overlays don't block the FAB except its own toast container */
.wishlist-toast-container { pointer-events: none; }
.wishlist-toast-container .toast { pointer-events: auto; }

/* Interests Section */
.interests-section .interest-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Features Section: equalize card heights */
#features .row > [class*='col-'] { display: flex; }
#features .service-card { width: 100%; height: 100%; }
#features .service-card .card-body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.interests-section .interest-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.interests-section .row > [class*='col-'] { display: flex; }
.interests-section .interest-card { width: 100%; }
.interests-section .interest-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-right: 10px;
  color: #ff6a88;
  background: rgba(255,106,136,0.12);
}
.interests-section .interest-icon i { font-size: 18px; line-height: 1; color: #ff6a88; }
.interests-section .interest-text {
  font-weight: 600;
}

/* Screenshots Scrolling Animation */
.screenshots-scroll-container {
    overflow: hidden;
    position: relative; /* Animasyonu konumlandırmak için */
}

.screenshots-scroll-content {
    display: flex;
    /* Ekran genişliğine ve öğe sayısına göre ayarlanabilir */
    width: calc(250px * 9); /* Örnek: 9 öğe yan yana */
    animation: slide 20s linear infinite; /* Animasyon ayarları */
}

.screenshot-item {
    flex: none; /* Öğelerin boyutunu koru */
    width: 250px; /* Her bir ekran görüntüsü öğesinin genişliği */
    margin-right: 10px; /* Öğeler arasında boşluk */
}

@keyframes slide {
    0% {
        transform: translateX(0); /* Başlangıç pozisyonu */
    }
    100% {
        transform: translateX(calc(-250px * 6)); /* Kaydırma mesafesi (6 öğe kadar) */
    }
}

/* Pause animation on hover */
.screenshots-scroll-container:hover .screenshots-scroll-content {
    animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .screenshot-item {
        width: 200px;
        margin-right: 8px;
    }
    
    .screenshots-scroll-content {
        width: calc(200px * 9);
    }
    
    @keyframes slide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-200px * 6));
        }
    }
}

/* Hero title – make slightly smaller */
.hero-title {
  font-size: 2.0rem;
}
@media (min-width: 1200px) {
  .hero-title {
    font-size: 3.4rem;
  }
}
@media (min-width: 1400px) {
  .hero-title {
    font-size: 4.0rem;
  }
}

/* Hero CTA layout fixes */
.hero-cta { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; }
.hero-cta .btn {
  padding: 0.6rem 1rem;
  font-size: 1rem;
  white-space: nowrap;
}
.hero-cta .round-btn-lg {
  width: 48px; height: 48px;
}
.hero-cta a.fw-medium.text-decoration-none { display: inline-block; margin-top: 4px; white-space: nowrap; }

@media (min-width: 768px) {
  .hero-cta .btn { font-size: 1.05rem; }
}

/* Hide hero demo text on small/medium screens; show only icon */
.hero-demo-text { display: none; }
@media (min-width: 1400px) { .hero-demo-text { display: inline-block; } }
/* Always hide demo text for languages with longer strings to prevent wrap */
html[lang='es'] .hero-demo-text,
html[lang='de'] .hero-demo-text,
html[lang='fr'] .hero-demo-text { display: none !important; }

/* Navbar spacing/fit tweaks for long French/German labels */
html[lang='fr'] .navbar-nav .nav-item,
html[lang='de'] .navbar-nav .nav-item {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
html[lang='fr'] .navbar-nav .nav-link,
html[lang='de'] .navbar-nav .nav-link {
  white-space: nowrap;
  font-size: 0.95rem;
}

/* Global navbar compaction on desktop for all languages */
@media (min-width: 992px) {
  .navbar-nav .nav-item { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .navbar-nav .nav-link { font-size: 0.95rem; white-space: nowrap; }
}