/* Mobil Uygulama tanitim sayfasi - tema-agnostik (renkler tema degiskeni + fallback). */

.mob-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 860px) {
  .mob-hero { grid-template-columns: 1fr; text-align: center; }
}

.mob-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--slate-100, #F1F5F9);
  border: 1px solid var(--slate-200, #E2E8F0);
  color: var(--slate-700, #334155);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 20px;
}
.mob-hero-text h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; margin: 0 0 18px; }
.mob-accent { color: var(--red-500, #E85D2A); }
.mob-hero-text p { font-size: 17px; color: var(--slate-500, #64748B); max-width: 520px; }
@media (max-width: 860px) { .mob-hero-text p { margin-inline: auto; } }

.mob-stores { display: flex; gap: 14px; margin: 26px 0 14px; flex-wrap: wrap; }
@media (max-width: 860px) { .mob-stores { justify-content: center; } }
.mob-store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px;
  border-radius: 12px;
  background: #0B1622;
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.mob-store:hover { transform: translateY(-2px); opacity: .92; color: #fff; }
.mob-store-ico { font-size: 22px; line-height: 1; }
.mob-store-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.mob-store-txt small { font-size: 10px; opacity: .8; }
.mob-store-txt strong { font-size: 16px; font-weight: 700; }
.mob-note { font-size: 13px; color: var(--slate-500, #64748B); font-weight: 600; }

.mob-hero-visual { display: flex; justify-content: center; }
.mob-hero-visual img {
  width: 100%; max-width: 300px; height: auto;
  border-radius: 30px; border: 1px solid #E7EEF5;
  box-shadow: 0 26px 60px rgba(10, 34, 64, .22);
}

/* Istatistikler */
.mob-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 700px) { .mob-stats { grid-template-columns: repeat(2, 1fr); } }
.mob-stat {
  background: #FFFFFF;
  border: 1px solid var(--slate-200, #E2E8F0);
  border-radius: 14px;
  padding: 26px 18px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(10, 34, 64, .06);
}
.mob-stat strong { display: block; font-size: 38px; font-weight: 800; color: var(--red-500, #E85D2A); line-height: 1; }
.mob-stat span { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--slate-500, #64748B); }

/* Gerçek ekran görüntüleri galerisi */
.mob-shots {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
}
@media (max-width: 1100px) {
  .mob-shots { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 210px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
  .mob-shot { scroll-snap-align: start; }
}
.mob-shot { text-align: center; margin: 0; }
.mob-shot img {
  width: 100%; height: auto; border-radius: 22px;
  border: 1px solid #E7EEF5; box-shadow: 0 14px 34px rgba(10, 34, 64, .15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mob-shot img:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(10, 34, 64, .22); }
.mob-shot figcaption { margin-top: 12px; font-size: 13px; font-weight: 700; color: #5C6B7A; }

/* Rapor türleri chip'leri */
.mob-reports { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 860px; margin: 0 auto; }
.mob-report-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: #FFFFFF; border: 1px solid #E9EEF4; border-radius: 999px;
  padding: 11px 20px; font-size: 14px; font-weight: 600; color: #16324B;
  box-shadow: 0 4px 14px rgba(10, 34, 64, .05); transition: transform .18s ease, box-shadow .18s ease;
}
.mob-report-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10, 34, 64, .1); }
.mob-report-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #D6232A); }

/* Nasıl başlanır adımları */
.mob-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 820px) { .mob-steps { grid-template-columns: repeat(2, 1fr); } }
.mob-step {
  background: #FFFFFF; border: 1px solid #E9EEF4; border-radius: 16px;
  padding: 26px 20px; text-align: center; box-shadow: 0 6px 18px rgba(10, 34, 64, .06);
}
.mob-step-num {
  width: 42px; height: 42px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
  color: #fff; background: linear-gradient(135deg, #E4572E, #D6232A); margin-bottom: 14px;
}
.mob-step h3 { font-size: 16px; margin: 0 0 6px; color: #16324B; }
.mob-step p { font-size: 13px; color: #5C6B7A; line-height: 1.6; margin: 0; }