body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

.build-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 6vw 80px;
}

.build-steps {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: 20px;
}


.option-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.pill input {
  accent-color: #667eea;
}

.pill:hover {
  border-color: #cbd5e1;
  background: #eef2ff;
}

.split-pane {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.code-pane,
.preview-pane {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 14px;
  border: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
}

.pane-header {
  padding: 10px 12px;
  border-bottom: 1px solid #1e293b;
  color: #cbd5e1;
  font-weight: 700;
  background: #111827;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

#codeEditor {
  width: 100%;
  min-height: 260px;
  border: none;
  outline: none;
  resize: vertical;
  background: #0f172a;
  color: #e2e8f0;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  border-bottom-left-radius: 14px;
  }

#codePreview {
  margin: 0;
  padding: 14px;
  white-space: pre-wrap;
  min-height: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body.dark-mode .build-steps {
  background: #1f2430;
  border-color: #2e3443;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

body.dark-mode .pill {
  border-color: #2e3443;
  background: #1f2937;
  color: #e5e7eb;
}

body.dark-mode .pill:hover {
  border-color: #4b5563;
  background: #111827;
}
/* Framework Kartları */
#framework-container .card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

#framework-container .card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

#framework-container .btn-primary {
  background-color: #007BFF;
  color: white;
  text-decoration: none;
}

#framework-container .btn-primary:hover {
  background-color: #0056b3;
}

/* Genel Kart Stilleri */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Kartın genişliği sabit */
  height: 300px; /* Kartın yüksekliği sabit */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.card:hover {
  transform: scale(1.05);
}

.card .btn-primary {
  background-color: #007BFF;
  color: white;
}

.card .btn-primary:hover {
  background-color: #0056b3;
}
.dark-mode {
  background-color: #121212;
  color: #ffffff; 
}
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode p {
  color: #eae4e4; /* Başlıklar ve paragraflar için açık renk */
}

.dark-mode .card {
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid #444;
}
#dark-mode-toggle {
  background-color: #f0f0f0f0;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.dark-mode a {
  color: #bb86fc;
}
.dark-mode a:hover {
  color: #ffffff; /* Link üzerine gelindiğinde beyaz */
}
.dark-mode .menu a {
  color: #ffffff; /* Menü linkleri */
}
.dark-mode .menu a:hover {
  color: #bb86fc; /* Menü linki üzerine gelindiğinde */
}

/* Tüm sayfa için arka plan ve yazı rengi */
.hakkinda-page.dark-mode {
  background-color: #121212; /* Arka plan rengini koyu yap */
  color: #ffffff; /* Yazı rengini açık yap */
}

/* "Ben Kimim?" Bölümü */
.hakkinda-page.dark-mode .about-section {
  background-color: #1a1a1a; /* Arka plan koyu */
  color: #ffffff; /* Yazılar açık renk */
}

.hakkinda-page.dark-mode .about-section h2 {
  color: #5061c0; /* Başlık rengi sarı */
}

/* Mobil Uygulama Geliştirme Adımları */
.hakkinda-page.dark-mode .steps-section {
  background-color: #1a1a1a; /* Arka plan koyu */
  color: #ffffff; /* Yazılar açık renk */
}

.hakkinda-page.dark-mode .steps-section ol li {
  color: #ffffff; /* Liste elemanları açık renk */
}

/* Eğitim Videoları Bölümü */
.hakkinda-page.dark-mode #video-egitim {
  background-color: #1a1a1a; /* Arka plan koyu */
  color: #ffffff; /* Yazılar açık renk */
}

.hakkinda-page.dark-mode #video-egitim h2 {
  color: hsl(259, 35%, 62%); /* Başlık rengi sarı */
}

/* Araçlar ve Teknolojiler Bölümü */
.hakkinda-page.dark-mode .card {
  background-color: #1e1e1e; /* Kartların arka planı */
  color: #ffffff; /* Yazılar açık renk */
  border: 1px solid #444; /* Kart kenar rengi */
}

.hakkinda-page.dark-mode .card h5 {
  color: #5462b1; /* Kart başlığı sarı */
}

.hakkinda-page.dark-mode .card .btn-primary {
  background-color: #e3dbd8; /* Buton arka plan rengi */
  color: #5462b1; /* Buton yazı rengi */
}

.hakkinda-page.dark-mode .card .btn-primary:hover {
  background-color: #f0edec; /* Buton hover rengi */
}
/* Mobil Uygulama Nasıl Geliştirilir? Başlığı İçin Özel Stil */
.hakkinda-page.dark-mode .steps-section h2 {
  color: #5462b1; 
}
.dark-mode .contact-section h2, 
.dark-mode .contact-section label {
  color: #190e94; /* Karanlık modda beyaz renk */
}
/* Tooltip Konteyneri */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip Metni */
.tooltip-text {
  visibility: hidden;
  width: 160px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px 0;

  /* Tooltip'in pozisyonu */
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Yukarıda görünmesi için */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip Gösteren Ok */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; /* Tooltip'in altına ok ekler */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Hover Durumunda Tooltip Gösterimi */
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.slide {
  min-width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
}

/* Genel Margin ve Padding Optimizasyonu */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Yatay kaydırmayı engeller */
}

section {
  padding: 20px 0; /* Bölüm boşlukları optimize edildi */
  margin: 0; /* Tüm kenarlardaki boşlukları kaldırın */
}

header, footer {
  padding: 10px 20px; /* Başlık ve altbilgi boşlukları düzenlendi */
}
.card {
  border-radius: 15px;
  background-color: #f8f9fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin: 20px auto;
  max-width: 600px;
  overflow: hidden;
}

.card img {
  border-radius: 8px;
  width: 100%;
  max-height: 100px;
  height: auto;
  object-fit: contain; /* Görselleri karta düzgün sığdırır */
  margin-bottom: 10px;
}

.card h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #343a40;
  margin-bottom: 10px;
}

.card p {
  font-size: 1rem;
  text-align: justify;
  margin-top: 15px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 15px;
}

.card a {
  display: inline-block;
  font-weight: bold;
  color: #007bff;
  text-decoration: none;
  margin-top: 10px;
}
.card-content h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 10px;
}

.card-content p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 15px;
}

.card-content .btn {
  display: inline-block;
  padding: 10px 15px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.card-content .btn:hover {
  background-color: #0056b3;
}
.featured-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.card a:hover {
  text-decoration: underline;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1; /* İçerik alanını büyüt */
}

footer {
  background-color: #343a40;
  color: white;
  padding: 3rem 2rem;
  margin-top: 3rem;
  width: 100%;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.footer-section {
  width: 100%;
  text-align: center;
}

.footer-section h3 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.social-links a.twitter:hover {
  background-color: #1DA1F2;
}

.social-links a.facebook:hover {
  background-color: #1877F2;
}

.social-links a.linkedin:hover {
  background-color: #0077B5;
}

.social-links a.instagram:hover {
  background-color: #E4405F;
}

.email-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.email-links a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.email-links a:hover {
  color: #03dac6;
  text-decoration: underline;
}

.copyright {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

/* Dark Mode Footer Styles */
body.dark-mode footer {
  background-color: #1a1a1a;
  border-top: 2px solid #bb86fc;
}

body.dark-mode .social-links a {
  background-color: rgba(187, 134, 252, 0.1);
  border: 1px solid rgba(187, 134, 252, 0.3);
}

body.dark-mode .social-links a:hover {
  background-color: rgba(187, 134, 252, 0.3);
  border-color: #bb86fc;
}

body.dark-mode .email-links a:hover {
  color: #bb86fc;
}

body.dark-mode .copyright {
  border-top-color: rgba(187, 134, 252, 0.3);
}


header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px;
  background-color: #343a40;
  border-bottom: 1px solid #ddd;
  position: relative;
  z-index: 2;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

#dark-mode-toggle:hover {
  background-color: #5e3e88f0;
}

/* Sağ Bölge (Logo) */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Sağ tarafa hizalama */
  margin-left: auto; /* Logoyu en sağa iter */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  position: relative;
  width: 100%;
}
.carousel-inner img {
  max-height: 500px; /* Slider'ın yüksekliğini sınırlandırır */
  object-fit: cover; /* Görsellerin düzgün kırpılmasını sağlar */
}

#overlay {
  z-index: 1; /* Modalın altında kalmasını sağlar */
}


.zoom-container img {
  transition: transform 0.3s ease; /* Geçiş efekti */
  display: block;
  width: 100%; /* Görselin tamamen görünmesi için */
}

.zoom-container:hover img {
  transform: scale(1.2); /* Yakınlaştırma miktarı */
}
.banner {
  text-align: center;
  padding: 50px 20px;
  background: url('images/banner.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  margin-bottom: 20px;
  border-radius: 10px;
}
.örnekler-page.dark-mode {
  background-color: #121212; /* Arka plan rengini koyu yap */
  color: #ffffff; /* Yazı rengini açık yap */
}

/* "Ben Kimim?" Bölümü */
.örnekler-page.dark-mode .about-section {
  background-color: #1a1a1a; /* Arka plan koyu */
  color: #ffffff; /* Yazılar açık renk */
}

.örnekler-page.dark-mode .about-section h2 {
  color: #5061c0; /* Başlık rengi sarı */
}

/* Mobil Uygulama Geliştirme Adımları */
.örnekler-page.dark-mode .steps-section {
  background-color: #1a1a1a; /* Arka plan koyu */
  color: #ffffff; /* Yazılar açık renk */
}

.örnekler-page.dark-mode .steps-section ol li {
  color: #ffffff; /* Liste elemanları açık renk */
}

/* Eğitim Videoları Bölümü */
.örnekler-page.dark-mode #video-egitim {
  background-color: #1a1a1a; /* Arka plan koyu */
  color: #ffffff; /* Yazılar açık renk */
}

.örnekler-page.dark-mode #video-egitim h2 {
  color: hsl(259, 35%, 62%); /* Başlık rengi sarı */
}

/* Araçlar ve Teknolojiler Bölümü */
.örnekler-page.dark-mode .card {
  background-color: #1e1e1e; /* Kartların arka planı */
  color: #ffffff; /* Yazılar açık renk */
  border: 1px solid #444; /* Kart kenar rengi */
}

.örnekler-page.dark-mode .card h5 {
  color: #5462b1; /* Kart başlığı sarı */
}

.örnekler-page.dark-mode .card .btn-primary {
  background-color: #e3dbd8; /* Buton arka plan rengi */
  color: #5462b1; /* Buton yazı rengi */
}

.örnekler-page.dark-mode .card .btn-primary:hover {
  background-color: #f0edec; /* Buton hover rengi */
}
/* Mobil Uygulama Nasıl Geliştirilir? Başlığı İçin Özel Stil */
.örnekler-page.dark-mode .steps-section h2 {
  color: #5462b1; 
}

/* Hero Header Styles for home.html */
.hero-header {
  position: relative;
  width: 100%;
  height: auto;
  min-height: auto;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: visible;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.top-nav {
  width: 100%;
  padding: 20px 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.nav-links {
  display: flex;
  gap: 25px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 8px 15px;
  border-radius: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.nav-links a.active {
  background: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

.nav-cta-button {
  background: #fff !important;
  color: #667eea !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 25px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

.nav-cta-button:hover {
  background: #f0f0f0 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Mobilde headerın içeriği kapatmaması için düzenlemeler */
@media (max-width: 768px) {
  .top-nav {
    padding: 14px 16px;
    position: sticky;
  }

  .nav-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .nav-links {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav-links a {
    padding: 8px 12px;
  }
}

.hero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.hero-title {
  font-size: 4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
  animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 40px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  opacity: 0.95;
  animation: fadeInUp 1s ease-out 0.2s both;
}

.build-page .hero-content {
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.build-page .hero-main {
  padding-top: 40px;
  padding-bottom: 40px;
}

.cta-button {
  display: inline-block;
  padding: 18px 45px;
  background: #fff;
  color: #667eea;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  animation: fadeInUp 1s ease-out 0.4s both;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  background: #f0f0f0;
}

.toggle {
  background: #fffefef0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.toggle:hover {
  background: #f0f0f0f0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .top-nav {
    padding: 15px 20px;
  }
  
  .nav-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .nav-links {
    gap: 15px;
    justify-content: center;
  }
  
  .nav-links a {
    font-size: 0.9rem;
    padding: 6px 12px;
  }
  
  .cta-button {
    padding: 15px 35px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .brand {
    font-size: 1.2rem;
  }
  
  .nav-links {
    flex-direction: column;
    gap: 10px;
  }
}

/* Dark Mode for Hero Header */
body.dark-mode .hero-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

body.dark-mode .hero-overlay {
  background: rgba(0, 0, 0, 0.5);
}

body.dark-mode .top-nav {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.dark-mode .cta-button {
  background: #667eea;
  color: #fff;
}

body.dark-mode .cta-button:hover {
  background: #764ba2;
}

body.dark-mode .nav-cta-button {
  background: #667eea !important;
  color: #fff !important;
}

body.dark-mode .nav-cta-button:hover {
  background: #764ba2 !important;
}

/* Slider Styles */
.slider-section {
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
}

.slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  padding: 40px 30px 30px;
  text-align: center;
}

.slide-content h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeInUp 0.8s ease-out;
}

.slide-content p {
  font-size: 1.2rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.3);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 15px 20px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(5px);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.prev-btn {
  left: 20px;
}

.next-btn {
  right: 20px;
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.dot.active {
  background: white;
  transform: scale(1.2);
}

.dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Responsive Slider */
@media (max-width: 768px) {
  .slider-container {
    height: 400px;
  }
  
  .slide-content h2 {
    font-size: 2rem;
  }
  
  .slide-content p {
    font-size: 1rem;
  }
  
  .slider-btn {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    padding: 10px;
  }
  
  .prev-btn {
    left: 10px;
  }
  
  .next-btn {
    right: 10px;
  }
}

@media (max-width: 480px) {
  .slider-container {
    height: 300px;
  }
  
  .slide-content {
    padding: 20px 15px 15px;
  }
  
  .slide-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .slide-content p {
    font-size: 0.9rem;
  }
}

/* Dark Mode for Slider */
body.dark-mode .slider-btn {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

body.dark-mode .slider-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .dot {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .dot.active {
  background: #667eea;
}

/* Idea cards on home */
.section-subtitle {
  margin-top: 10px;
  color: #6b7280;
  font-size: 1rem;
}

body.dark-mode .section-subtitle {
  color: #cfd4e0;
}

.idea-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.idea-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
}

.idea-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.idea-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}

.idea-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.idea-icon {
  font-size: 2.4rem;
}

.idea-card h3 {
  margin: 0;
  font-size: 1.3rem;
}

.idea-card p {
  margin: 0;
  line-height: 1.5;
  color: #f9fafb;
}

.idea-link {
  margin-top: auto;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.idea-card.food {
  background: linear-gradient(135deg, #f97316, #f59e0b);
}

.idea-card.education {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
}

.idea-card.shopping {
  background: linear-gradient(135deg, #059669, #10b981);
}

.idea-card.blog {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.idea-card.health {
  background: linear-gradient(135deg, #ec4899, #f472b6);
}

.idea-card.finance {
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
}

body.dark-mode .idea-card {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

body.dark-mode .video-modal__dialog {
  background: #0b1222;
  color: #e5e7eb;
}

@media (max-width: 768px) {
  .idea-section {
    padding: 30px 16px 50px;
  }

  .idea-card {
    padding: 18px;
  }
}

/* Idea detail page */
.idea-detail {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 6vw 90px;
}

.idea-hero {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.idea-hero-text h1 {
  margin: 6px 0 8px;
  font-size: 2rem;
}

.idea-category {
  font-weight: 700;
  color: #6366f1;
  margin: 0;
}

.idea-description {
  margin: 0;
  color: #4b5563;
}

.video-section {
  margin: 12px auto 32px;
  max-width: 1100px;
  width: 100%;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.steps-header h2 {
  margin: 0 0 6px;
}

.steps-header p {
  margin: 0 0 16px;
  color: #6b7280;
}

.steps-section {
  max-width: 1100px;
  margin: 0 auto;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.step-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-card h3 {
  margin: 0;
  font-size: 1.1rem;
}

.step-card p {
  margin: 0;
  color: #4b5563;
  line-height: 1.6;
}

.step-number {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

body.dark-mode .idea-description,
body.dark-mode .steps-header p,
body.dark-mode .step-card p {
  color: #d5d9e1;
}

body.dark-mode .step-card {
  background: #1f2430;
  border-color: #2e3443;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* FAQ section */
.faq-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 10px 20px 40px;
}

.faq-header {
  text-align: center;
  margin-bottom: 24px;
}

.faq-kicker {
  margin: 0;
  color: #6366f1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.faq-section h3 {
  margin: 6px 0 8px;
  font-size: 1.8rem;
}

.faq-desc {
  margin: 0;
  color: #4b5563;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 16px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.faq-item[open] {
  border-color: #667eea;
  box-shadow: 0 12px 26px rgba(102, 126, 234, 0.18);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: #111827;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-weight: 900;
  color: #667eea;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  content: "–";
  transform: translateY(-1px);
}

.faq-answer {
  margin-top: 10px;
  color: #4b5563;
  line-height: 1.5;
}

body.dark-mode .faq-item {
  background: #1f2430;
  border-color: #2e3443;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

body.dark-mode .faq-item[open] {
  border-color: #8b9bff;
  box-shadow: 0 12px 26px rgba(102, 126, 234, 0.25);
}

body.dark-mode .faq-item summary {
  color: #e5e7eb;
}

body.dark-mode .faq-answer,
body.dark-mode .faq-desc {
  color: #d5d9e1;
}

/* Overview title highlight */
#overview {
  text-align: center;
  padding: 40px 20px 10px;
}

.overview-title {
  font-size: clamp(2.2rem, 4vw + 1rem, 3.4rem);
  font-weight: 800;
  margin: 0 0 10px;
  background: linear-gradient(120deg, #7c3aed, #2563eb, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  animation: pulseGlow 3s ease-in-out infinite;
}

.overview-title::after {
  content: "⚡";
  font-size: 1.6rem;
  filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.6));
}

@keyframes pulseGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(124, 58, 237, 0.4); }
  50% { text-shadow: 0 0 26px rgba(37, 99, 235, 0.55); }
}

/* Back button round on idea page */
.idea-detail .back-button.inline {
  border-radius: 14px;
  display: inline-block;
  padding: 10px 16px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.25);
}

/* Home full-width main */
.home-main {
  width: 100%;
  max-width: none;
  padding: 0 0 80px;
}

.home-main section {
  padding-left: 6vw;
  padding-right: 6vw;
}

.home-main .slider-section {
  padding-left: 0;
  padding-right: 0;
}

.home-main .idea-section,
.home-main .feature-section,
.home-main .process-section,
.home-main .faq-section {
  padding-left: 6vw;
  padding-right: 6vw;
}

/* Feature highlights */
.feature-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 22px;
}

.kicker {
  margin: 0;
  color: #6366f1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.section-header h3 {
  margin: 6px 0 6px;
  font-size: 1.9rem;
}

.section-header p {
  margin: 0;
  color: #4b5563;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.feature-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.25);
}

.feature-card h4 {
  margin: 0;
  font-size: 1.15rem;
}

.feature-card p {
  margin: 0;
  color: #4b5563;
}

.community-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 85% 20%, rgba(216, 195, 207, 0.8), transparent 35%), radial-gradient(circle at 15% 15%, rgba(215, 192, 209, 0.912), transparent 30%), linear-gradient(135deg, #1e182965 0%, #1d17384f 100%);
  border-radius: 20px;
  padding: 60px 6vw;
  box-shadow: 0 18px 48px rgba(147, 120, 140, 0.45);
}

.community-section .section-header .kicker {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.community-section .section-header h3 {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.community-section .section-header p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.feature-card.community-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.16)) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.feature-card.community-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.22)) !important;
}

.feature-card.community-card h4 {
  color: #ffffff !important;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.feature-card.community-card p {
  color: #f5f5f5 !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.feature-card.community-card .feature-icon {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.feature-card.community-card .chip {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

body.dark-mode .community-card {
  border-color: rgba(255, 255, 255, 0.18);
}

.kit-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 20% 20%, rgba(99,102,241,0.18), transparent 35%), radial-gradient(circle at 80% 10%, rgba(168,85,247,0.14), transparent 30%), linear-gradient(135deg, #0f172a 0%, #0b1220 100%);
  border-radius: 20px;
  padding: 60px 6vw;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
}

.kit-section .section-header h3 {
  color: #e0e7ff;
}

.kit-section .section-header p {
  color: #c7d2fe;
}

.kit-section .feature-grid {
  gap: 16px;
}

.kit-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.16);
}

.kit-card:nth-child(1) {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(168, 85, 247, 0.12));
}

.kit-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(56, 189, 248, 0.12));
}

.kit-card:nth-child(3) {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(34, 197, 235, 0.12));
}

.kit-card:nth-child(4) {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.16), rgba(190, 24, 93, 0.12));
}

.kit-card h4 {
  color: #e5e7eb;
}

.kit-card p {
  color: #cbd5e1;
}

.kit-card .chip {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #e0e7ff;
  font-weight: 700;
  font-size: 0.9rem;
}

body.dark-mode .kit-card {
  border-color: rgba(255, 255, 255, 0.16);
}

body.dark-mode .feature-card {
  background: #1f2430;
  border-color: #2e3443;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* Process timeline */
.process-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.process-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
}

.process-number {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #10b981);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.process-item h4 {
  margin: 0 0 6px;
}

.process-item p {
  margin: 0;
  color: #4b5563;
}

body.dark-mode .process-item {
  background: #1f2430;
  border-color: #2e3443;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
  .feature-section,
  .process-section {
    padding: 10px 16px;
  }
}