/* =========================================================
   cozumler.css — Çözümler sayfaları (B2C, B2B, B2X, Pazaryeri)
   Dört sayfa aynı tasarım şablonunu kullandığı için stiller
   bu tek dosyada; sayfalar arasında yalnızca içerik değişir.
   Kartlar, adımlar, SSS ve CTA: components.css
   ========================================================= */

/* ---------- Başlık alanı ---------- */
.solution-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 647px) minmax(0, 529px);
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  padding: 24px 0 56px;
}
.solution-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.solution-hero__lead { max-width: 647px; font-size: 18px; line-height: 29px; color: var(--gray-700); }
.solution-hero__buttons { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }

/* Üstteki "B2C | E-ticaret sitesi" etiketi */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: #FFFFFF;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--navy-500);
}
.pill-badge__tag {
  padding: 2px 9px;
  background: var(--coral-500);
  border-radius: 14px;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
}

/* ---------- Özellikler başlık satırı ---------- */
.solution-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-bottom: 40px;
}
.solution-head .title-44 { max-width: 640px; }
.solution-head__note { max-width: 330px; font-size: 16px; line-height: 26px; color: var(--gray-700); }

/* =========================================================
   PANEL ÖNİZLEMESİ (dashboard)
   ---------------------------------------------------------
   Tasarımda 529px genişliğinde. Tüm ölçüler "em" ile yazıldı:
   1em = 7.577px (tasarımdaki temel birim). Container query ile
   kutu daraldıkça font-size, dolayısıyla tüm iç ölçüler,
   orantılı küçülür.
   ========================================================= */
.dash-wrap { container-type: inline-size; width: 100%; }
.dash {
  display: flex;
  font-size: 7.577px;                /* yedek değer */
  font-size: calc(100cqw / 69.84);   /* 529.2px genişlikte 7.577px */
  line-height: 1.5;
  background: var(--gray-100);
  border: .1em solid #DCE3E9;
  border-radius: 2em;
  box-shadow: 0 4em 8em -2.6em rgba(26, 42, 57, 0.35);
  overflow: hidden;
  color: var(--navy-500);
  transition: transform .35s ease, box-shadow .35s ease;
  user-select: none;
}
.dash:hover { transform: translateY(-4px); box-shadow: 0 5em 9em -2.6em rgba(26, 42, 57, 0.42); }
.dash small, .dash b, .dash em, .dash i { display: block; font-style: normal; }
.dash ul { margin: 0; padding: 0; list-style: none; }

/* Sol menü */
.dash__side {
  display: flex;
  flex-direction: column;
  gap: .4em;
  flex: 0 0 15em;
  padding: 1.4em 1em;
  background: var(--navy-500);
}
.dash__brand { display: flex; align-items: center; gap: .8em; padding: .2em .4em 1.4em; }
.dash__brand b { font-weight: 600; font-size: 1.2em; line-height: 1.5; color: #FFFFFF; }
.dash__brand small { font-size: .75em; letter-spacing: .13em; color: #8FA0B0; }
.dash__mark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .2em;
  flex: none;
  width: 2.6em;
  height: 2.6em;
  border-radius: .8em;
  background: var(--teal-500);
}
.dash__mark i { width: 1.2em; height: .2em; border-radius: .1em; background: var(--navy-500); }
.dash__mark i:nth-child(2) { width: .8em; }

.dash__menu { display: flex; flex-direction: column; gap: .4em; }
.dash__menu li {
  display: flex;
  align-items: center;
  gap: .7em;
  height: 3.3em;
  padding: 0 .8em;
  border-radius: .8em;
  font-size: 1.1em;
  color: var(--gray-400);
}
.dash__menu li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash__menu svg { width: 1.2em; height: 1.2em; flex: none; }
.dash__menu li.is-active { background: var(--navy-400); font-weight: 600; color: #FFFFFF; }
.dash__menu em { padding: .05em .55em; border-radius: 1em; background: var(--navy-300); font-size: .82em; color: var(--gray-300); }
.dash__menu--sub li { height: 2.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 2.9em; }
.dash__group { padding: 1.2em .8em .4em; font-size: .8em; letter-spacing: .15em; color: #6F8294; }
.dash__user {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-top: auto;
  padding: .8em;
  border-radius: 1em;
  background: var(--navy-400);
}
.dash__avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: .6em;
  background: var(--coral-500);
  font-weight: 700;
  font-size: 1.1em;
}
.dash__user b { font-weight: 600; font-size: .9em; color: #FFFFFF; white-space: nowrap; }
.dash__user small { font-size: .85em; color: #8FA0B0; }

/* Sağ ana alan */
.dash__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  height: 4.7em;
  padding: 0 1.4em;
  background: #FFFFFF;
  border-bottom: .1em solid var(--gray-200);
}
.dash__channels { display: flex; align-items: center; gap: .6em; }
.dash__channels b { padding-right: .4em; font-weight: 600; font-size: 1.1em; white-space: nowrap; }
.dash__channels i {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 .3em;
  border: .1em solid var(--gray-200);
  border-radius: 1.2em;
  background: #FFFFFF;
  font-weight: 700;
  font-size: .9em;
}
.dash__channels i::after {
  content: "";
  position: absolute;
  top: -.25em;
  right: -.25em;
  width: .7em;
  height: .7em;
  border: .12em solid #FFFFFF;
  border-radius: 50%;
  background: var(--teal-500);
}
.dash__sync {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .5em 1em;
  border-radius: 1.3em;
  background: var(--teal-100);
  font-weight: 600;
  font-size: 1em;
  color: #006B62;
  white-space: nowrap;
}
.dash__sync i { width: .6em; height: .6em; border-radius: 50%; background: var(--teal-500); animation: dash-blink 1.6s ease-in-out infinite; }
@keyframes dash-blink { 50% { opacity: .3; } }

.dash__content { display: flex; flex-direction: column; gap: 1.2em; padding: 1.4em; }
.dash__head { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.dash__head b { font-weight: 700; font-size: 1.6em; line-height: 1.45; }
.dash__head small { font-size: 1em; color: var(--gray-600); }
.dash__range {
  display: flex;
  gap: .2em;
  padding: .4em;
  border: .1em solid var(--gray-200);
  border-radius: 1.8em;
  background: #FFFFFF;
}
.dash__range i { padding: .3em .8em; border-radius: 1.6em; font-size: 1.1em; color: var(--gray-600); white-space: nowrap; }
.dash__range i.is-active { padding-inline: 1em; background: var(--teal-500); font-weight: 600; color: var(--navy-500); }

.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; }
.dash__kpi {
  display: flex;
  flex-direction: column;
  gap: .6em;
  min-width: 0;
  padding: 1.3em 1em 1em;
  border-top: .3em solid var(--teal-500);
  border-radius: 1em;
  background: #FFFFFF;
}
.dash__kpi--navy  { border-top-color: var(--navy-500); }
.dash__kpi--coral { border-top-color: var(--coral-500); }
.dash__kpi-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .4em; min-height: 2em; }
.dash__kpi-top small { font-weight: 600; font-size: .85em; line-height: 1.3; letter-spacing: .06em; color: var(--gray-600); }
.dash__kpi-icon {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: .6em;
  background: var(--teal-100);
  color: var(--teal-700);
}
.dash__kpi-icon svg { width: 1.1em; height: 1.1em; }
.dash__kpi-icon--gray  { background: var(--gray-150); color: var(--navy-500); }
.dash__kpi-icon--coral { background: var(--coral-100); color: var(--coral-700); }
.dash__kpi-val { display: flex; justify-content: space-between; align-items: center; gap: .4em; }
.dash__kpi-val b { font-weight: 700; font-size: 1.6em; line-height: 1.5; white-space: nowrap; }
.dash__kpi-val em { padding: .2em .5em; border-radius: .85em; background: var(--teal-100); font-weight: 600; font-size: .85em; color: #006B62; white-space: nowrap; }
.dash__kpi-val em.is-down { background: var(--coral-100); color: #A3470F; }
.dash__kpi-note { font-size: .85em; color: #8FA0B0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash__table { padding: 1.2em; border-radius: 1.2em; background: #FFFFFF; }
.dash__table-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-bottom: 1em; }
.dash__table-head b { font-weight: 700; font-size: 1.2em; }
.dash__table-head small { font-size: .9em; color: var(--gray-600); }
.dash__badge { padding: .5em .9em; border: .1em solid var(--gray-200); border-radius: .8em; font-size: .95em; white-space: nowrap; }

.dash__row {
  display: grid;
  grid-template-columns: 11.8fr 10fr 7.25fr 8.16fr 9.07fr;
  align-items: center;
  gap: .8em;
  padding: .9em 0 .8em;
  border-top: .1em solid var(--gray-150);
  font-weight: 500;
  font-size: 1.1em;
}
.dash__row > * { min-width: 0; }
.dash__row--head { padding: .9em 0 .6em; border-top: 0; font-weight: 600; font-size: .8em; letter-spacing: .06em; color: var(--gray-600); }
.dash__order b { font-weight: 700; font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash__order small { font-weight: 400; font-size: .82em; color: var(--gray-600); white-space: nowrap; }
.dash__chan { display: flex; align-items: center; gap: .45em; white-space: nowrap; }
.dash__chan i {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 1.45em;
  height: 1.45em;
  border-radius: .36em;
  font-weight: 700;
  font-size: .73em;
  color: #FFFFFF;
}
.dash__pill { display: inline-block !important; padding: .25em .55em; border-radius: .55em; font-weight: 600; font-size: .77em; white-space: nowrap; }
.dash__pill--ok    { background: var(--teal-100); color: #006B62; }
.dash__pill--warn  { background: var(--coral-100); color: #A3470F; }
.dash__pill--muted { background: var(--gray-150); color: #3A4B5B; }
/* Fareyle satırın üzerine gelince hafif vurgu */
.dash__row:not(.dash__row--head) { transition: background-color .15s; }
.dash__row:not(.dash__row--head):hover { background: var(--gray-50); }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .solution-hero__row { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 991.98px) {
  .solution-hero__row { grid-template-columns: 1fr; padding-bottom: 40px; }
  .dash-wrap { max-width: 640px; }
}
@media (max-width: 575.98px) {
  .solution-hero__lead { font-size: 16px; line-height: 26px; }
  .solution-hero__buttons .btn { flex: 1 1 100%; }
  .dash { border-radius: 1.4em; }
}