/* =========================================================
   components.css — İç sayfaların ORTAK bileşenleri
   ---------------------------------------------------------
   Kurumsal, Çözümler, Entegrasyonlar, Referanslar, Paketler,
   Kayıt ve 404 sayfaları bu dosyayı kullanır. Burada tekrar
   eden parçalar var: sayfa başlığı (hero), kırıntı menü,
   alt sekmeler, CTA şeritleri, kartlar, akordeon (SSS),
   çipler, form alanları ve pop-up (modal) görünümü.
   Sayfaya özel stiller kendi dosyasında durur.
   ========================================================= */

/* ---------- 1. Ek butonlar ---------- */

/* Çerçeveli buton ("Sizi Arayalım", "Demo Talep Edin")
   Normalde beyaz zemin + lacivert çerçeve; üzerine gelince turkuaz. */
.btn-outline-navy {
  --bs-btn-color: var(--navy-500);
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: var(--navy-500);
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: var(--navy-500);
  --bs-btn-hover-bg: var(--teal-500);
  --bs-btn-hover-border-color: var(--teal-500);
  --bs-btn-active-color: var(--navy-500);
  --bs-btn-active-bg: #00A598;
  --bs-btn-active-border-color: #00A598;
  --bs-btn-font-weight: 500;
}

/* Lacivert zemin üstündeki buton: o da beyaz, üzerine gelince turkuaz */
.btn-outline-light-site {
  --bs-btn-color: var(--navy-500);
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: #FFFFFF;
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: var(--navy-500);
  --bs-btn-hover-bg: var(--teal-500);
  --bs-btn-hover-border-color: var(--teal-500);
  --bs-btn-active-color: var(--navy-500);
  --bs-btn-active-bg: #00A598;
  --bs-btn-active-border-color: #00A598;
  --bs-btn-font-weight: 500;
}

/* Gri ince çerçeveli beyaz buton (404 "Bize ulaşın" vb.) — hover'da turkuaz */
.btn-line {
  --bs-btn-color: var(--navy-500);
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: var(--gray-200);
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: var(--navy-500);
  --bs-btn-hover-bg: var(--teal-500);
  --bs-btn-hover-border-color: var(--teal-500);
  --bs-btn-active-color: var(--navy-500);
  --bs-btn-active-bg: #00A598;
  --bs-btn-active-border-color: #00A598;
}

/* Hover'da turkuaza dönen tüm butonlara hafif turkuaz gölge */
.btn-teal:hover, .btn-soft:hover, .btn-outline-navy:hover,
.btn-outline-light-site:hover, .btn-line:hover { box-shadow: 0 10px 24px -12px rgba(0, 184, 169, 0.7); }

/* Tasarımdaki 52px yüksekliğinde, 16px yazılı butonlar */
.btn-52 {
  height: 52px;
  --bs-btn-font-size: 16px;
  --bs-btn-line-height: 24px;
  --bs-btn-border-radius: 12px;
  --bs-btn-padding-x: 22px;
}

/* ---------- 2. Ortak başlık stilleri ---------- */
.title-44 {
  font-weight: 600;
  font-size: 44px;
  line-height: 49px;
  letter-spacing: -1.1px;
  color: var(--navy-500);
}
.title-hero {
  font-weight: 600;
  font-size: 58px;
  line-height: 63px;
  letter-spacing: -1.6px;
  color: var(--navy-500);
}
.text-lead-17 { font-size: 17px; line-height: 27px; color: var(--gray-700); }

/* Bölüm üst boşluğu: tasarımda her bölüm 112px aşağıdan başlıyor */
.block { padding-top: 112px; }
.block--last { padding-bottom: 112px; }

/* ---------- 3. Sayfa başlığı (hero) + kırıntı menü ---------- */
.page-hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF8F7 100%);
  padding-top: 56px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 21px;
  color: var(--gray-600);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--gray-600); }
.crumbs a { color: var(--gray-600); transition: color .15s; }
.crumbs a:hover { color: var(--teal-700); }
.crumbs [aria-current] { font-weight: 500; color: var(--navy-500); }

.page-hero__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
  margin-bottom: 18px;
}
.page-hero__row > * { min-width: 0; max-width: 100%; }
.page-hero__title { max-width: 600px; }
.page-hero__lead { flex: 0 1 420px; }

/* Kurumsal / Çözümler sayfalarının altındaki sekmeler */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
}
.subnav a {
  position: relative;
  display: block;
  padding: 14px 18px 17px;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: var(--gray-600);
  transition: color .15s;
}
/* Altta beliren ince turkuaz çizgi: hover'da yarım, aktifte tam */
.subnav a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-500);
  transform: scaleX(0);
  transition: transform .2s;
}
.subnav a:hover { color: var(--navy-500); }
.subnav a:hover::after { transform: scaleX(.4); }
.subnav a.is-active { color: var(--navy-500); }
.subnav a.is-active::after { transform: scaleX(1); }

/* ---------- 4. Ortak CTA şeridi ("Mağazanızı 15 gün ücretsiz deneyin") ---------- */
.cta-strip { padding-block: 112px; }
.cta-strip__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 48px;
  border-top: 1px solid var(--gray-200);
}
.cta-strip__title {
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.6px;
  color: var(--navy-500);
}
.cta-strip__buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Lacivert CTA kutusu (Çözümler sayfaları) */
.cta-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 56px;
  background: var(--navy-500);
  border-radius: 28px;
}
.cta-band__text { max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.cta-band__eyebrow { font-weight: 600; font-size: 14px; line-height: 21px; color: var(--teal-500); }
.cta-band__title {
  font-weight: 600;
  font-size: 36px;
  line-height: 43px;
  letter-spacing: -0.8px;
  color: #FFFFFF;
}

/* ---------- 5. Kartlar ---------- */

/* Kenarlıklı beyaz kart: hover'da çerçeve turkuazlaşır ve kart hafif yükselir */
.card-hover {
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card-hover:hover {
  border-color: rgba(0, 184, 169, 0.55);
  box-shadow: 0 22px 40px -28px rgba(26, 42, 57, 0.45);
  transform: translateY(-2px);
}

/* Özellik kartı (ikon + başlık + açıklama) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: #FFFFFF;
  border: 1px solid var(--gray-200);
  border-radius: 22px;
}
.feature-card__title { margin: 0; font-weight: 600; font-size: 19px; line-height: 26px; color: var(--navy-500); }
.feature-card__text { margin: 0; font-size: 15px; line-height: 24px; color: var(--gray-700); }

/* İkon kutusu: 44px, üç renk seçeneği */
.icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: var(--teal-100);
  color: var(--teal-700);
  transition: background-color .2s, color .2s;
}
.icon-box svg { width: 22px; height: 22px; }
.icon-box--gray  { background: var(--gray-150); color: var(--navy-500); }
.icon-box--coral { background: var(--coral-100); color: var(--coral-700); }
/* Kartın üzerine gelince ikon kutusu dolu renge döner */
.feature-card:hover .icon-box        { background: var(--teal-500); color: var(--navy-500); }
.feature-card:hover .icon-box--gray  { background: #FFFFFF; color: var(--navy-500); }
.feature-card:hover .icon-box--coral { background: var(--coral-500); color: var(--navy-500); }

/* Lacivert bölümdeki adım kartları (Nasıl çalışır) */
.steps-section { padding-block: 112px; background: var(--navy-500); }
.steps-section .eyebrow { color: var(--teal-500); }
.steps-section .title-44 { color: #FFFFFF; max-width: 640px; }
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.step-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid #3A4B5B;
  border-radius: 22px;
  transition: border-color .2s, background-color .2s;
}
.step-card:hover { border-color: var(--teal-500); background: var(--navy-400); }
.step-card__no {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal-500);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy-500);
  transition: background-color .2s;
}
/* Numara normalde turkuaz; kartın üzerine gelince turuncuya döner */
.step-card:hover .step-card__no { background: var(--coral-500); }
.step-card__title { margin: 0; font-weight: 600; font-size: 18px; line-height: 26px; color: #FFFFFF; }
.step-card__text { margin: 0; font-size: 15px; line-height: 24px; color: var(--gray-400); }

/* İstatistik kartı (2.000+ / 7/24 ...) */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  background: #FFFFFF;
}
.stat-card__value {
  font-weight: 600;
  font-size: 42px;
  line-height: 63px;
  letter-spacing: -1px;
  color: var(--navy-500);
}
.stat-card__value--teal { color: var(--teal-700); }
.stat-card__label { font-size: 15px; line-height: 22px; color: var(--gray-700); }

/* Logo kartı (Entegrasyonlar, Referanslar) */
.logo-card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  transition: border-color .2s, background-color .2s, box-shadow .2s, transform .2s;
}
.logo-card img { max-width: 100%; height: auto; transition: transform .2s; }
/* Üzerine gelince: zemin BEYAZ kalır, sadece çerçeve turkuaz olur ve gölge çıkar.
   (Zemin turkuaza dönünce bazı logoların kendi beyaz arka planı kutu gibi görünüyordu.) */
a.logo-card:hover,
button.logo-card:hover {
  border-color: var(--teal-500);
  box-shadow: 0 16px 30px -22px rgba(0, 122, 112, 0.6);
}
a.logo-card:hover img,
button.logo-card:hover img { transform: scale(1.04); }

/* ---------- 6. Çip (filtre / seçim düğmeleri) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: #FFFFFF;
  border: 1px solid var(--gray-350);
  border-radius: 20px;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--navy-500);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover:not(.is-active) { background: var(--teal-500); border-color: var(--teal-500); color: var(--navy-500); }
.chip.is-active,
.chip[aria-pressed="true"],
.chip[aria-checked="true"] { background: var(--teal-100); border-color: var(--teal-500); color: var(--navy-500); }
.chip:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.chip--square { border-radius: 10px; }

/* Lacivert zeminde çerçeveli etiket (B2C / B2B / Moda / Spor ...) */
.tag-outline {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border: 1px solid #3A4B5B;
  border-radius: 12px;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: #FFFFFF;
  transition: border-color .15s, background-color .15s, color .15s;
}
a.tag-outline:hover { border-color: var(--teal-500); background: var(--teal-500); color: var(--navy-500); }

/* ---------- 7. Akordeon (SSS) — Bootstrap collapse ile çalışır ---------- */
.acc { display: flex; flex-direction: column; gap: 10px; }
.acc-item {
  background: #FFFFFF;
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  transition: border-color .2s, box-shadow .2s;
}
.acc-item:hover { border-color: var(--gray-350); }
/* Açık olan soru: turkuaz çerçeve */
.acc-item:has(.acc-item__button:not(.collapsed)) { border-color: var(--teal-500); }

.acc-item__heading { margin: 0; }
.acc-item__button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  line-height: 26px;
  color: var(--navy-500);
}
.acc-item__button:focus-visible { outline: 2px solid var(--teal-500); outline-offset: -2px; border-radius: 18px; }

/* Sağdaki yuvarlak +/× ikonu */
.acc-item__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal-500);
  transition: background-color .2s, transform .25s;
  transform: rotate(45deg); /* açıkken "+" 45° dönüp "×" olur */
}
.acc-item__icon::before,
.acc-item__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--navy-500);
  transform: translate(-50%, -50%);
}
.acc-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-item__button.collapsed .acc-item__icon { background: var(--gray-100); transform: rotate(0); }
.acc-item__button.collapsed:hover .acc-item__icon { background: var(--teal-100); }

.acc-item__answer {
  margin: 0;
  padding: 0 70px 22px 22px;
  font-size: 16px;
  line-height: 26px;
  color: var(--gray-700);
}

/* SSS bölüm düzeni: solda başlık, sağda sorular */
.faq-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.72fr);
  gap: 48px;
}

/* ---------- 8. Form alanları ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-weight: 500; font-size: 14px; line-height: 21px; color: var(--navy-500); }
.input-site {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  background: #FFFFFF;
  border: 1px solid var(--gray-350);
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--navy-500);
  transition: border-color .15s, box-shadow .15s;
}
.input-site::placeholder { color: #8A97A3; }
.input-site:hover { border-color: #A9B6C2; }
.input-site:focus { outline: 0; border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(0, 184, 169, 0.15); }
textarea.input-site { height: 101px; padding: 12px 15px; resize: vertical; }
/* Bootstrap doğrulaması: gönderilen formda hatalı alan kırmızı çerçeve */
.was-validated .input-site:invalid { border-color: #D9534F; }
.was-validated .input-site:invalid:focus { box-shadow: 0 0 0 4px rgba(217, 83, 79, 0.15); }

.check-site { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 21px; color: var(--gray-700); }
.check-site input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--teal-500);
  cursor: pointer;
}
.check-site a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.check-site a:hover { color: var(--teal-500); }
.was-validated .check-site input:invalid + span { color: #C0392B; }

/* ---------- 9. Pop-up (Bootstrap modal) ---------- */
.modal-backdrop { --bs-backdrop-bg: var(--navy-500); --bs-backdrop-opacity: 0.55; }
.modal-site .modal-content {
  border: 0;
  border-radius: 28px;
  box-shadow: 0 40px 80px -24px rgba(26, 42, 57, 0.5);
}
/* Açılırken hafif büyüyerek gelsin */
.modal-site.fade .modal-dialog { transform: translateY(16px) scale(.97); transition: transform .25s ease-out; }
.modal-site.show .modal-dialog { transform: none; }

.btn-close-round {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  color: var(--navy-500);
  transition: background-color .15s, border-color .15s, transform .2s;
}
.btn-close-round:hover { background: var(--gray-100); border-color: var(--gray-350); transform: rotate(90deg); }

/* ---------- 10. Responsive ---------- */
@media (max-width: 1199.98px) {
  .faq-split { grid-template-columns: 1fr 1.6fr; }
}
@media (max-width: 991.98px) {
  .block { padding-top: 80px; }
  .block--last { padding-bottom: 80px; }
  .title-hero { font-size: 44px; line-height: 50px; letter-spacing: -1.2px; }
  .title-hero br, .title-44 br { display: none; }
  .title-44 { font-size: 36px; line-height: 42px; letter-spacing: -0.8px; }
  .page-hero__row { flex-direction: column; align-items: flex-start; }
  .page-hero__lead { flex-basis: auto; max-width: 560px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps, .steps--3 { grid-template-columns: repeat(2, 1fr); }
  .steps-section, .cta-strip { padding-block: 80px; }
  .faq-split { grid-template-columns: 1fr; gap: 28px; }
  .cta-band { padding: 40px; }
  .cta-band__title { font-size: 30px; line-height: 37px; }
  .cta-band__title br { display: none; }
}
@media (max-width: 575.98px) {
  .block { padding-top: 64px; }
  .block--last { padding-bottom: 64px; }
  .title-hero { font-size: 30px; line-height: 36px; letter-spacing: -0.6px; overflow-wrap: break-word; }
  .title-44 { font-size: 30px; line-height: 36px; letter-spacing: -0.6px; }
  .feature-grid, .steps, .steps--3 { grid-template-columns: 1fr; }
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .subnav a { white-space: nowrap; padding-inline: 12px; }
  .cta-strip { padding-block: 64px; }
  .cta-strip__title { font-size: 26px; line-height: 32px; }
  .cta-band { padding: 28px 24px; border-radius: 22px; }
  .cta-band__title { font-size: 26px; line-height: 32px; }
  .acc-item__answer { padding-right: 22px; }
  .acc-item__button { font-size: 16px; }
}

/* =========================================================
   KART HOVER KURALI: Fare beyaz/gri bir kartın üzerine gelince
   kart LACİVERT olur (Önerilen paket kartı gibi). Başlıklar beyaza,
   açıklamalar açık griye döner ki lacivert zeminde okunsun.
   İçindeki butonlar beyaz kalır, butonun üzerine gelince turkuaz olur.
   ========================================================= */
.feature-card, .info-card { transition: background-color .25s, border-color .25s, box-shadow .25s, transform .25s; }
.feature-card__title, .feature-card__text { transition: color .25s; }
.feature-card:hover, .info-card:hover { background: var(--navy-500); border-color: var(--navy-500); }
.feature-card:hover .feature-card__title, .info-card:hover .feature-card__title { color: #FFFFFF; }
.feature-card:hover .feature-card__text, .info-card:hover .feature-card__text { color: var(--gray-300); }
.info-card:hover .icon-box        { background: var(--teal-500); color: var(--navy-500); }
.info-card:hover .icon-box--gray  { background: #FFFFFF; color: var(--navy-500); }
.info-card:hover .icon-box--coral { background: var(--coral-500); color: var(--navy-500); }

/* İstatistik kartları */
.stat-card { transition: background-color .25s, border-color .25s, box-shadow .25s, transform .25s; }
.stat-card__value, .stat-card__label { transition: color .25s; }
.stat-card:hover { background: var(--navy-500); border-color: var(--navy-500); }
.stat-card:hover .stat-card__value { color: #FFFFFF; }
.stat-card:hover .stat-card__value--teal { color: var(--teal-500); }
.stat-card:hover .stat-card__label { color: var(--gray-300); }