/* ============================================================
   SWIPE CLEAR — ürün ve yasal sayfalar
   style.css'in üzerine yüklenir; tüm değerler oradaki token'lardan.
   Uygulamanın yeşili yalnızca bu sayfalarda, --app ile sınırlı.
   ============================================================ */

:root {
  --app:     #1FC08E;
  --app-dim: rgb(31 192 142 / .16);
}


/* ---- Ürün başlığı ----------------------------------------- */
.app-hero__id {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.app-hero__icon {
  width: clamp(64px, 8vw, 88px);
  height: auto;
  border-radius: 22%;
  box-shadow: var(--shadow);
}
.app-hero__name {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: var(--fs-lg);
  line-height: 1.2;
}
.app-hero__by { color: var(--fog); text-transform: none; letter-spacing: .06em; }

.app-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}
.app-facts li {
  padding: .35rem .7rem;
  border: 1px solid var(--hair-lit);
  border-radius: 999px;
  color: var(--fog);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
}
.app-facts li strong { color: var(--chalk); font-weight: 500; }

/* App Store düğmesi — sitedeki .btn ile aynı iskelet, uygulama rengiyle */
.btn--store { background: var(--chalk); color: var(--ink); }
.btn--store svg.btn__apple { width: 18px; height: 18px; flex: none; }
.btn--ghost {
  background: transparent;
  color: var(--chalk);
  border: 1px solid var(--hair-str);
}
.btn--ghost:hover { background: var(--lift-hi); }
.cta--row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }


/* ---- Ekran görüntüleri ------------------------------------ */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 22vw, 260px);
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .5rem var(--pad-x) 2rem;
  margin-inline: calc(var(--pad-x) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--ash) transparent;
}
.shot { scroll-snap-align: center; display: grid; gap: .85rem; }
.shot__frame {
  position: relative;
  padding: 7px;
  background: var(--steel);
  border: 1px solid var(--hair-lit);
  border-radius: 34px;
  box-shadow: var(--shadow);
}
.shot__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  border-radius: 28px;
  background: var(--graphite);
}
.shot figcaption {
  color: var(--fog);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.shot figcaption strong { color: var(--chalk); font-weight: 500; display: block; }


/* ---- Adımlar ---------------------------------------------- */
.steps3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  counter-reset: step;
}
.steps3 li {
  counter-increment: step;
  border-top: 1px solid var(--hair-lit);
  padding-top: 1.1rem;
  display: grid;
  gap: .45rem;
}
.steps3 li::before {
  content: '0' counter(step);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--app);
}
.steps3 h3 {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: var(--fs-lg);
  line-height: 1.2;
}
.steps3 p { color: var(--fog); font-size: var(--fs-sm); }

.lcard__tag--app { color: var(--app); }


/* ---- Premium ---------------------------------------------- */
.plan {
  display: grid;
  gap: 1rem;
  max-width: 72ch;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  background: var(--graphite);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
}
.plan ul { display: grid; gap: .55rem; }
.plan li { display: flex; gap: .65rem; color: var(--fog); }
.plan li::before { content: '✓'; color: var(--app); flex: none; }
.plan__note { color: var(--fog); font-size: var(--fs-sm); }


/* ---- Leiyla çapraz tanıtım -------------------------------- */
.maker {
  display: grid;
  gap: 1rem;
  max-width: 72ch;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid var(--hair-lit);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--lift-hi), transparent 70%);
}
.maker p { color: var(--fog); }


/* ---- Dil seçici ------------------------------------------- */
.lang-switch {
  display: inline-flex;
  gap: .35rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
}
.lang-switch a, .lang-switch span {
  padding: .25rem .55rem;
  border: 1px solid var(--hair-lit);
  border-radius: var(--r-sm);
  color: var(--fog);
}
.lang-switch [aria-current] { color: var(--ink); background: var(--chalk); border-color: var(--chalk); }
.lang-switch a:hover { color: var(--chalk); }


/* ---- Yasal metin ------------------------------------------ */
.legal {
  padding: 0 var(--pad-x) var(--sec-y);
  max-width: calc(78ch + var(--pad-x) * 2);
  margin-inline: auto;
  display: grid;
  gap: 1rem;
  color: var(--fog);
}
.legal h2 {
  color: var(--chalk);
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: var(--fs-lg);
  line-height: 1.25;
  margin-top: 1.5rem;
}
.legal h3 { color: var(--chalk); font-size: var(--fs-body); margin-top: .5rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: .4rem; }
.legal a { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--chalk); font-weight: 500; }
.legal__meta { font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .06em; }
.legal table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.legal th, .legal td { border: 1px solid var(--hair-lit); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.legal th { color: var(--chalk); font-weight: 500; }
.legal__scroll { overflow-x: auto; }


/* ---- Responsive ------------------------------------------- */
@media (max-width: 860px) {
  .steps3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lgrid--app { grid-template-columns: 1fr; }
  .cta--row .btn { width: 100%; justify-content: space-between; }
}


/* ---- Başlıkta telefon (geniş ekran) ------------------------ */
.app-hero__text { display: grid; gap: 1.15rem; justify-items: start; }
.app-hero__phone { display: none; }

@media (min-width: 980px) {
  .app-hero {
    grid-template-columns: minmax(0, 1fr) clamp(250px, 23vw, 320px);
    align-items: center;
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }
  .app-hero__phone {
    display: block;
    position: relative;
    transform: rotate(4deg);
  }
  .app-hero__phone::before {
    content: '';
    position: absolute;
    inset: 10% -25%;
    background: radial-gradient(closest-side, var(--app-dim), transparent);
    filter: blur(30px);
    z-index: -1;
  }
}

.section__lede a { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }