/* ============================================
   HowTo Sayfa Stilleri
   ============================================ */

/* Kalın mavi divider yerine full-width banner */
.howto-divider {
  width: 100%;
  height: 4px;
  background-color: #0d6efd;
  margin: 3rem 0 1.5rem;
}

/* Başlık stil */
.howto-title {
  font-family: 'Segoe UI', sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* Nav-pills sekme stili */
#howto-tabs .nav-pills .nav-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  margin: 0 .5rem;
  text-transform: uppercase;
  border-radius: .375rem;
  padding: .5rem 1rem;
}
#howto-tabs .nav-pills .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}

/* howto-banner: full-width background */
.howto-banner {
  background-image: url('../images/login-circuit-bg.jpg');
  background-size: cover;
  background-position: center;
  padding: 4rem 0;
  color: #fff;
  position: relative;
  text-align: center;
  z-index: 1;
}
.howto-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: -1;
}
.howto-banner .howto-title {
  color: #fff;
}
.howto-banner + #howto-tabs {
  background: #f8f9fa;
  padding-top: 1rem;
  margin-top: -1rem;
  position: relative;
  z-index: 2;
}

/* ========================================================
   YENİ EKLENEN SÜREÇ AKIŞI (TIMELINE) STİLLERİ
   ======================================================== */

/* Tüm süreci saran ve dikey çizgiyi tutan ana container */
.process-wrapper {
  position: relative;
  padding: 20px 0;
  max-width: 900px; /* Okunabilirliği artırmak için maksimum genişlik */
  margin: 0 auto; /* Sayfada ortalamak için */
}

/* Dikey çizginin kendisi */
.process-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 32px; /* İkonun tam ortasına gelmesi için (ikon genişliği 64px / 2) */
  height: 100%;
  width: 3px;
  background-color: #e9ecef; /* Açık gri bir çizgi */
  z-index: 1;
}

/* Her bir adım satırı */
.process-step {
  display: flex;
  position: relative;
  margin-bottom: 40px; /* Adımlar arası boşluk */
  align-items: flex-start;
}

/* GIF'i çevreleyen ikon kutusu */
.process-icon {
  position: absolute;
  left: 0;
  top: 0px; 
  width: 64px;
  height: 64px;
  background-color: #ffffff; /* Arka planı beyaz yaparak dikey çizgiyi keser */
  border: 3px solid #e9ecef; /* Çizgiyle aynı renkte çerçeve */
  border-radius: 50%; /* Tam yuvarlak yapar */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; /* Dikey çizginin üzerinde kalmasını sağlar */
  padding: 10px; /* GIF ile çerçeve arasına boşluk koyar */
  box-sizing: border-box; /* Padding'in genişliği etkilememesi için */
}

/* İkon kutusunun içindeki GIF */
.process-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Başlık ve açıklamayı içeren sağdaki içerik kutusu */
.process-content {
  margin-left: 90px; /* İkon ve boşluk için soldan mesafe bırakır */
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 8px; /* Köşeleri yuvarlatır */
  width: 100%;
  background-color: #ffffff;
}

/* Son adımdan sonraki gereksiz boşluğu kaldır */
.process-step:last-child {
  margin-bottom: 0;
}


/* ============================================
   KOYU TEMA UYUMLULUĞU
   ============================================ */

/* Koyu temada sekme renkleri */
.dark-mode #howto-tabs .nav-pills .nav-link {
  color: #adb5bd;
}

.dark-mode #howto-tabs .nav-pills .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}

.dark-mode .howto-banner + #howto-tabs {
  background-color: #212529; /* Ana arka plan rengi */
}

/* Koyu temada süreç akışı stilleri */
.dark-mode .process-wrapper::before {
  background-color: #343a40; /* Koyu tema için çizgi rengi */
}

.dark-mode .process-icon {
  background-color: #212529; /* Koyu tema için ikon arka planı */
  border-color: #343a40; /* Koyu tema için ikon çerçevesi */
}

.dark-mode .process-content {
  background-color: #2c3034; /* Koyu tema için içerik kutusu arka planı */
  border-color: #495057;
}
/* Güvenlik bölümündeki soluk metni beyaz yapmak için */
.dark-mode .lead.text-muted {
  color: #f8f9fa !important;
}

/* ============================================
   HOW-TO PREMIUM (scoped)
   ============================================ */

.fn-howto .fn-hero-sub {
  max-width: 900px;
  color: #374151;
}

.fn-howto .howto-hero-icon {
  width: 108px;
  height: 108px;
  margin: 1rem auto 0.6rem;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 215, 0, 0.42), rgba(93, 132, 255, 0.42)),
    rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fn-howto .howto-hero-icon::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  pointer-events: none;
}

.fn-howto .howto-hero-icon i {
  font-size: 2.9rem;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.fn-howto .howto-main-card {
  min-height: auto;
  padding: 1.2rem;
}

.fn-howto .container.py-4 {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
}

.fn-howto .nav.nav-pills {
  gap: 0.55rem;
}

.fn-howto .nav.nav-pills .nav-link {
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.78);
  color: #1f2937;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
}

.fn-howto .nav.nav-pills .nav-link.active {
  border-color: rgba(78, 140, 255, 0.45);
  background: linear-gradient(145deg, rgba(78, 140, 255, 0.95), rgba(118, 102, 255, 0.92));
  color: #fff;
  box-shadow: 0 12px 28px rgba(78, 140, 255, 0.35);
}

.fn-howto .process-wrapper::before {
  background: linear-gradient(180deg, rgba(78, 140, 255, 0.32), rgba(255, 215, 0, 0.28));
}

.fn-howto .process-icon {
  background:
    linear-gradient(145deg, rgba(255, 215, 0, 0.35), rgba(93, 132, 255, 0.32)),
    rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.fn-howto .process-content {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.fn-howto .process-content h5 {
  color: #111827;
}

.fn-howto .process-content .text-muted {
  color: #4b5563 !important;
}

.fn-howto .alert.alert-info {
  border: 1px solid rgba(78, 140, 255, 0.32);
  background: linear-gradient(145deg, rgba(78, 140, 255, 0.14), rgba(140, 80, 255, 0.12));
  color: #1f2937;
}

[data-theme="dark"] .fn-howto .fn-hero-sub {
  color: #e5e7eb;
}

[data-theme="dark"] .fn-howto .nav.nav-pills .nav-link {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #e5e7eb;
}

[data-theme="dark"] .fn-howto .process-wrapper::before {
  background: linear-gradient(180deg, rgba(120, 150, 255, 0.5), rgba(255, 215, 0, 0.42));
}

[data-theme="dark"] .fn-howto .process-icon {
  background:
    linear-gradient(145deg, rgba(255, 215, 0, 0.26), rgba(93, 132, 255, 0.24)),
    rgba(33, 37, 41, 0.78);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .fn-howto .process-content {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(33, 37, 41, 0.72);
}

[data-theme="dark"] .fn-howto .process-content h5 {
  color: #f3f4f6;
}

[data-theme="dark"] .fn-howto .process-content .text-muted {
  color: #d1d5db !important;
}

[data-theme="dark"] .fn-howto .alert.alert-info {
  border-color: rgba(120, 150, 255, 0.42);
  background: linear-gradient(145deg, rgba(78, 140, 255, 0.2), rgba(140, 80, 255, 0.18));
  color: #f3f4f6;
}