/* ===========================================
   PAGE: Loopple (loaded after style.css)
   The hero is the app's night sky: the icon's blue running into teal, with
   the warm light of the loop playing on the stage. Below it the page goes
   dark and quiet, as BiteMap's does, so the moving picture leads.
   =========================================== */

.lp-hero {
  --teal: #6FE3D2;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + var(--space-10)) var(--gutter) var(--space-12);
  background:
    radial-gradient(ellipse 55% 50% at 70% 46%, rgba(232, 150, 74, 0.30) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 10% 95%, rgba(31, 181, 166, 0.25) 0%, transparent 70%),
    linear-gradient(160deg, #22348F 0%, #15205A 50%, #0B1026 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.lp-hero__inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.lp-hero__copy {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* The macOS icon carries its own shape and margin. */
.lp-hero__icon {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-3);
}

.lp-hero__title {
  font-size: clamp(56px, 9vw, 104px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff;
  margin: 0 0 var(--space-4);
}

.lp-hero__lead {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 var(--space-4);
}

.lp-hero__lead em {
  font-style: normal;
  color: var(--teal);
  white-space: nowrap;
}

.lp-hero__desc {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.82);
  max-width: 460px;
  margin: 0 auto var(--space-8);
}

.lp-buy {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.lp-buy__price {
  font-size: var(--text-md);
  font-weight: 800;
  color: #0B1026;
  background: var(--teal);
  padding: 10px 22px;
  border-radius: var(--radius-full);
}

.lp-buy__note {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
}

.lp-hero .store-badges { justify-content: center; margin-top: var(--space-4); }

.lp-hero__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.lp-hero__link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}

.lp-hero__link:hover { color: #fff; }

.lp-hero__sep { color: rgba(255, 255, 255, 0.4); }

/* The stage: the loop playing in the shape of the output picked under it. Its
   height comes from its own width, so the 16:9 frame always fits the column and
   the 9:16 one keeps that height. */
.lp-stage {
  position: relative;
  width: 100%;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-stage__frame {
  --h: min(56.25cqw, 340px);
  position: relative;
  height: var(--h);
  width: calc(var(--h) * 16 / 9);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 120px rgba(232, 150, 74, 0.25);
}

/* Animate the change of shape only when an output is picked, not while the
   window is resized. */
.lp-stage.is-switching .lp-stage__frame {
  transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.55s ease;
}

.lp-stage[data-format="shorts"] .lp-stage__frame {
  width: calc(var(--h) * 9 / 16);
  border-radius: 18px;
}

.lp-stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The channel's logo, burned into the corner like the export does it. */
.lp-stage__logo {
  position: absolute;
  right: 4%;
  bottom: 6%;
  font-size: clamp(9px, 1.2vw, 12px);
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  transition: all 0.4s ease;
}

.lp-stage[data-format="shorts"] .lp-stage__logo {
  right: auto;
  left: 50%;
  bottom: auto;
  top: 6%;
  transform: translateX(-50%);
}

/* The cover: the same frame, still, with its own big title. */
.lp-stage__cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8%;
  background: rgba(8, 10, 24, 0.38);
  font-size: clamp(26px, 4.4vw, 46px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.lp-stage[data-format="cover"] .lp-stage__cover { opacity: 1; }

.lp-stage__spec {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: 800;
  color: #fff;
}

.lp-stage__spec span {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.lp-picker {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.lp-picker__chip {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lp-picker__chip:hover { background: rgba(255, 255, 255, 0.14); }

.lp-picker__chip[aria-pressed="true"] {
  color: #0B1026;
  background: #fff;
  border-color: #fff;
}

.lp-picker__chip:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* The arithmetic of a long video: one short loop, many times over. */
.lp-repeat {
  margin-top: var(--space-6);
  width: min(100%, 420px);
  text-align: center;
}

.lp-repeat__strip {
  height: 10px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(232, 150, 74, 0.85) 0 5px, rgba(232, 150, 74, 0.35) 5px 7px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.lp-repeat__text {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
}

/* Phones: the picture first, where the eye lands, then the words. */
@media (max-width: 899px) {
  .lp-stage { order: -1; }
  .lp-hero { padding-top: calc(var(--nav-height) + var(--space-6)); }
  .lp-hero__inner { gap: var(--space-8); }
  .lp-hero__icon { display: none; }
}

@media (min-width: 900px) {
  .lp-hero__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-12);
  }

  .lp-hero__copy { text-align: left; }
  .lp-hero__icon { margin-left: 0; }
  .lp-hero__desc { margin-left: 0; }
  .lp-buy { align-items: flex-start; }
  .lp-hero .store-badges,
  .lp-hero__links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-stage__frame,
  .lp-stage__logo,
  .lp-stage__cover { transition: none; }
}

/* ----- Below the hero: dark and quiet. ----- */

.lp-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.lp-heading {
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-align: center;
  margin: 0 0 var(--space-12);
}

.lp-how {
  padding: var(--space-20) var(--gutter);
  background: #0E1433;
}

.lp-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.lp-step {
  text-align: center;
  max-width: 300px;
  margin: 0 auto;
}

/* The app's tools panel for that step: tall and narrow, like a phone. */
.lp-step__panel {
  width: 210px;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--space-6);
  display: block;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 24px 40px rgba(0, 0, 0, 0.5);
}

.lp-step__num {
  width: 32px;
  height: 32px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: #6FE3D2;
  color: #0B1026;
  font-weight: 900;
  font-size: 15px;
  line-height: 32px;
}

.lp-step__title {
  font-size: var(--text-lg);
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--space-2);
}

.lp-step__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* The whole window, shown the way the editor is used. */
.lp-editor {
  padding: var(--space-20) var(--gutter);
  background: #0B1026;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-editor__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-10);
}

.lp-editor__title {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.lp-editor__title strong { color: #fff; font-weight: 800; }

.lp-editor__text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.lp-editor__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 40px 100px rgba(0, 0, 0, 0.6),
    0 0 160px rgba(42, 75, 176, 0.35);
}

.lp-inside {
  padding: var(--space-20) var(--gutter);
  background: #121938;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8) var(--space-12);
}

.lp-list li {
  padding-left: var(--space-5);
  border-left: 3px solid #6FE3D2;
}

.lp-list h3 {
  font-size: var(--text-md);
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--space-2);
}

.lp-list p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* At a glance: the plain facts, in one place. */
.lp-facts {
  padding: var(--space-20) var(--gutter);
  background: #0E1433;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-facts__table {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-facts__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-facts__row dt {
  font-size: var(--text-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}

.lp-facts__row dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: #fff;
}

.lp-support { background: #0B1026; }

@media (min-width: 640px) {
  .lp-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-12) var(--space-8); }
}

@media (min-width: 760px) {
  .lp-list { grid-template-columns: repeat(2, 1fr); }
  .lp-editor__head { grid-template-columns: 1.3fr 1fr; gap: var(--space-12); }
  .lp-facts__table { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-12); }
}

@media (min-width: 1000px) {
  .lp-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
  .lp-list { grid-template-columns: repeat(3, 1fr); }
}

/* A lighter film grain than the studio's, so it doesn't sit on the screenshots. */
.grain { opacity: 0.05; }

/* Privacy page: the Turkish version under the English one. */
.privacy__lang {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}