/* ===========================================================
   Mobil uygulama tanıtım sayfası
   =========================================================== */
.ap-hero { position: relative; padding: calc(112px + var(--safe-top, 0px)) 0 40px; overflow: hidden; }
.ap-hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto 30%;
  height: 720px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
  pointer-events: none;
}
.ap-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.ap-copy h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; margin: 20px 0; letter-spacing: -0.035em; }
.ap-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ap-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  cursor: default;
}
.ap-store .ic { color: var(--text-secondary); }
.ap-store small { display: block; font-size: 0.72rem; color: var(--accent); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ap-store b { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.ap-note { display: block; margin: 18px 0 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; max-width: 560px; }
.ap-link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* telefon çerçevesi */
.ap-phone {
  position: relative;
  width: 250px;
  padding: 9px;
  border-radius: 40px;
  background: linear-gradient(160deg, #2a2f37, #101216);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.85);
}
.ap-phone img { display: block; width: 100%; height: auto; border-radius: 32px; }
.ap-phones { position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; }
.ap-phone-c { z-index: 2; width: 270px; animation: ap-float 7s ease-in-out infinite; }
.ap-phone-l, .ap-phone-r { position: absolute; width: 220px; opacity: 0.9; }
.ap-phone-l { transform: translateX(-62%) rotate(-8deg) scale(0.92); }
.ap-phone-r { transform: translateX(62%) rotate(8deg) scale(0.92); }
@keyframes ap-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ekran galerisi */
.ap-gallery {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px max(24px, calc((100vw - 1192px) / 2)) 30px;
  scrollbar-width: none;
}
.ap-gallery::-webkit-scrollbar { display: none; }
.ap-gallery figure { margin: 0; flex: 0 0 auto; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ap-gallery .ap-phone { width: 230px; }
.ap-gallery figcaption { text-align: center; color: var(--text-muted); font-size: 0.86rem; max-width: 220px; }
.ap-gallery figcaption b { display: block; color: var(--text-primary); font-size: 1rem; margin-bottom: 2px; }

/* karşılaştırma */
.ap-compare-wrap { max-width: 820px; }
.ap-compare { border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--surface); }
.ap-row { display: grid; grid-template-columns: 1fr 110px 110px; align-items: center; border-top: 1px solid var(--border); }
.ap-row:first-child { border-top: none; }
.ap-row span { padding: 14px 18px; font-size: 0.95rem; }
.ap-row span:not(:first-child) { text-align: center; font-weight: 700; }
.ap-head span { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
.ap-head span:last-child { color: var(--accent); }
.ap-row .yes { color: var(--status-good); font-size: 1.1rem; }
.ap-row .no { color: var(--text-muted); }
.ap-row span:last-child { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ap-foot { margin: 14px 4px 0; color: var(--text-muted); font-size: 0.84rem; }

@media (max-width: 980px) {
  .ap-hero-grid { grid-template-columns: 1fr; }
  .ap-phones { min-height: 520px; }
}
@media (max-width: 560px) {
  .ap-hero { padding-top: calc(96px + var(--safe-top, 0px)); }
  .ap-phones { min-height: 470px; margin-inline: -16px; overflow: hidden; }
  .ap-phone-c { width: 220px; }
  .ap-phone-l, .ap-phone-r { width: 180px; }
  .ap-row { grid-template-columns: 1fr 74px 84px; }
  .ap-row span { padding: 12px 12px; font-size: 0.86rem; }
  .ap-gallery .ap-phone { width: 200px; }
}
@media (prefers-reduced-motion: reduce) { .ap-phone-c { animation: none; } }
.ap-note .live-dot { margin-right: 6px; vertical-align: 1px; }
.ap-row.ap-head span { white-space: nowrap; }
@media (max-width: 560px) {
  .ap-stores { flex-wrap: nowrap; }
  .ap-store { flex: 1; min-width: 0; padding: 10px 12px; gap: 9px; }
  .ap-store b { font-size: 1.02rem; white-space: nowrap; }
}