/* Tanıtım sayfası.
 *
 * Uygulama kabuğundan ayrı bir dosya: ziyaretçinin ilk indirdiği şey bu sayfa
 * ve uygulamanın ızgara/oynatıcı CSS'ini indirmesinin bir sebebi yok.
 * İkisi de base.css'teki aynı belirteçleri kullanıyor.
 */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* --- Başlık çubuğu --------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(7, 7, 12, 0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
.site-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.site-nav a {
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.site-nav a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.site-nav .btn { color: #fff; }

/* --- Hero ------------------------------------------------------------------ */

.hero { position: relative; padding: 84px 0 72px; overflow: hidden; }

/* Marka degradesinin çok yumuşak bir halesi — koyu zeminde gölge değil, ışık. */
.hero::before {
  content: ""; position: absolute; inset: -40% 20% auto -10%; height: 620px;
  background: radial-gradient(60% 60% at 30% 40%, rgba(139, 61, 255, 0.24), transparent 70%),
              radial-gradient(50% 50% at 75% 25%, rgba(255, 46, 126, 0.18), transparent 70%);
  filter: blur(30px); pointer-events: none;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 99px; margin-bottom: 20px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.eyebrow b { color: var(--cyan); font-weight: 800; }

.hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.05; }
.hero h1 em {
  font-style: normal;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { font-size: 17px; line-height: 1.6; color: var(--muted); margin-top: 20px; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__note { font-size: 13px; color: var(--dim); margin-top: 16px; }

/* Hero görseli: uygulamanın trend listesinden bir kesit */
.mock {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: linear-gradient(170deg, rgba(27,27,38,0.9), rgba(13,13,20,0.95));
  padding: 16px; box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.mock__head {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 6px 14px; font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.mock__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--magenta); flex: none; }
.mock__row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: var(--r-sm);
}
.mock__row + .mock__row { border-top: 1px solid rgba(42,42,56,0.6); }
.mock__rank {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 8px; font-size: 12px; font-weight: 900; color: #14141d;
}
.mock__art { width: 52px; height: 30px; flex: none; border-radius: 6px; background: #22222d; }
.mock__bars { flex: 1; min-width: 0; }
.mock__bar { height: 8px; border-radius: 99px; background: #2c2c3a; }
.mock__bar + .mock__bar { margin-top: 6px; width: 55%; background: #22222d; }

/* --- Bölüm başlıkları ------------------------------------------------------ */

.section-block { padding: 72px 0; border-top: 1px solid var(--line); }
.section-block > .wrap > header { max-width: 620px; margin-bottom: 40px; }
.section-block h2 { font-size: clamp(25px, 3.2vw, 34px); }
.section-block header p { font-size: 16px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

/* --- Özellik kartları ------------------------------------------------------ */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; }

.feature {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(20,20,29,0.55); padding: 22px;
}
.feature__icon {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-sm); margin-bottom: 15px;
}
.feature__icon svg { width: 20px; height: 20px; }
.feature h3 { font-size: 16px; margin-bottom: 8px; }
.feature p { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* --- Web / uygulama karşılaştırması ---------------------------------------- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.compare__col {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; background: rgba(20,20,29,0.5);
}
.compare__col--app {
  border-color: rgba(139, 61, 255, 0.42);
  background: linear-gradient(165deg, rgba(139,61,255,0.12), rgba(20,20,29,0.6));
}
.compare__col h3 { font-size: 16.5px; display: flex; align-items: center; gap: 9px; }
.compare__col h3 svg { width: 18px; height: 18px; color: var(--violet); }
.compare__col > p { font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.compare__list { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
.compare__list li { display: flex; gap: 11px; font-size: 14px; line-height: 1.5; }

/* Web sütunu "zaten var" (onay), uygulama sütunu "üstüne gelen" (artı) anlatıyor —
   iki farklı işaret, iki farklı renk. Aynı işareti iki sütunda da kullanmak
   "uygulamada bunlar YOK" gibi okunurdu. */
.tick {
  display: grid; place-items: center; flex: none;
  width: 19px; height: 19px; margin-top: 1px; border-radius: 6px;
  font-size: 12px; font-weight: 900; line-height: 1;
  background: rgba(53, 208, 127, 0.16); color: var(--success);
}
.tick--plus { background: rgba(139, 61, 255, 0.2); color: #c9a6ff; }

.compare__col .btn { margin-top: 22px; width: 100%; }

/* --- Nasıl çalışıyor ------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.step__n {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px;
  background: var(--brand-gradient); color: #fff; font-weight: 900; font-size: 14px;
  margin-bottom: 14px;
}
.step h3 { font-size: 15.5px; margin-bottom: 7px; }
.step p { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* --- İndir ----------------------------------------------------------------- */

.download { text-align: center; }
.download .wrap { max-width: 680px; }
.download h2 { font-size: clamp(26px, 3.4vw, 36px); }
.download p { font-size: 16px; color: var(--muted); margin-top: 16px; line-height: 1.6; }
.download__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }

.storebtn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 12px 22px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--card);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.storebtn:hover { border-color: var(--muted); background: var(--raised); }
.storebtn svg { width: 24px; height: 24px; flex: none; }
.storebtn span { display: block; text-align: left; }
.storebtn small { display: block; font-size: 10.5px; color: var(--dim); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }
.storebtn b { display: block; font-size: 15px; font-weight: 700; margin-top: 1px; }

/* --- SSS ------------------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 10px; max-width: 780px; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(20,20,29,0.5); overflow: hidden;
}
.faq summary {
  padding: 16px 18px; font-size: 15px; font-weight: 700; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq p { padding: 0 18px 18px; font-size: 14px; color: var(--muted); line-height: 1.6; }

/* --- Alt bilgi ------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); padding: 40px 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.site-footer a { font-size: 13.5px; color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.site-footer small { font-size: 12.5px; color: var(--dim); width: 100%; }

/* --- Uyarlanabilir düzen --------------------------------------------------- */

@media (max-width: 900px) {
  .hero { padding: 56px 0 48px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .compare { grid-template-columns: 1fr; }
  .section-block { padding: 56px 0; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .site-nav a:not(.btn) { display: none; }
  .hero__cta .btn, .download__cta .storebtn { flex: 1 1 100%; justify-content: center; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
  .site-footer nav { margin-left: 0; }
}