/* Vaybak! ana sayfa (WEB-04/05): indirme bloğu, mağaza düğmeleri, QR ve söz şeridi. Yalnız /tr/ ve /en/ yükler.
   Ayrı dosya: site.css bir yıl önbelleklenir ve Kahramanlar sayfası (Laravel) onun ?v= numarasına bağlıdır; yeni stiller eski ziyaretçide de görünsün diye burada.
   Renkler yalnız site.css değişkenlerinden gelir (açık/koyu tema kendiliğinden), bu yüzden ayrı koyu kural gerekmez.

   YAYIN ANAHTARI: Caddy <body data-launch="live|soon"> yazar (deploy/server/README.md, "Mağaza yayın anahtarı").
   Öznitelik yoksa, boşsa ya da şablon hiç çalışmadıysa (statik sunucu, önizleme) varsayılan YAYIN ÖNCESİ'dir: güvenli yön. */

.getapp {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.1rem 1.6rem;
  scroll-margin-top: 5rem;
}
.get-box { display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.get-live { display: none; }
body[data-launch="live"] .get-live { display: flex; }
body[data-launch="live"] .get-soon { display: none; }

/* Mağaza düğmeleri: kendi çizimimiz, Google/Apple rozeti değil (marka kuralları: resmî rozet gelince değiştirilir). */
.stores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.store {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 3.75rem; padding: 0 1.3rem 0 1.05rem;
  border-radius: 999px; text-decoration: none; text-align: left;
}
.store svg { width: 1.75rem; height: 1.75rem; flex: none; }
.store .txt { display: flex; flex-direction: column; line-height: 1.05; }
.store small { font-size: .82rem; font-weight: 700; }
.store b { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: .005em; }
a.store {
  background: var(--brand); color: #fff; box-shadow: 0 .35rem 0 var(--brand-deep);
  transition: transform .12s ease, box-shadow .12s ease;
}
a.store:hover { transform: translateY(-2px); box-shadow: 0 .5rem 0 var(--brand-deep); }
a.store:active { transform: translateY(.25rem); box-shadow: 0 .12rem 0 var(--brand-deep); }
/* Yayın öncesi: bağlantı değil, soluk ve kesik çerçeveli, "Yakında" etiketli */
.store.is-soon { background: var(--chip); color: var(--muted); border: .17rem dashed var(--muted); padding-top: .05rem; }
.store.is-soon small { background: var(--kivil); color: var(--kivil-ink); padding: .05rem .5rem; border-radius: 999px; align-self: flex-start; margin-bottom: .15rem; }
.get-note { margin: 0; color: var(--muted); font-size: 1rem; }

/* QR: yalnız geniş ekranda (telefondaki ziyaretçi zaten telefonda). Kendi beyaz zemini ve sessiz bölgesi var, koyu temada da okunur. */
.qr { display: none; margin: 0; text-align: center; }
.qr img { width: 8.25rem; height: 8.25rem; border-radius: 1rem; box-shadow: 0 .15rem 0 var(--shadow), 0 0 0 .2rem var(--chip); }
.qr figcaption { margin-top: .5rem; color: var(--muted); font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
@media (min-width: 56rem) {
  .qr { display: block; }
  .intro .getapp { justify-content: flex-start; flex-wrap: nowrap; gap: 1.6rem; }
  .intro .get-box { align-items: flex-start; }
  .intro .stores { justify-content: flex-start; }
}

/* Sayfa altı çağrı: aynı blok, ortalı, QR yok */
.cta-panel .getapp { flex-direction: column; }
.cta-panel .qr { display: none; }
.cta-panel .get-box { align-items: center; }
.cta-panel .how { text-align: left; }

/* Söz şeridi: dört simge + güven merkezine bağlantı */
.pledge {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.4rem;
  padding: .9rem 1.1rem; border-radius: 1.75rem; background: var(--chip);
}
.pledge ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1.1rem; }
.pledge li { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
.pledge .ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: var(--c); color: var(--ink-c); }
.pledge .ico svg { width: 1.4rem; height: 1.4rem; }
.pledge li:nth-child(1) { --c: var(--kivil); --ink-c: var(--kivil-ink); }
.pledge li:nth-child(2) { --c: var(--explore); --ink-c: var(--explore-ink); }
.pledge li:nth-child(3) { --c: var(--play); --ink-c: var(--play-ink); }
.pledge li:nth-child(4) { --c: var(--watch); --ink-c: var(--watch-ink); }
.pledge .ghost { min-height: 2.75rem; font-size: 1.05rem; padding: 0 1.15rem; }

@media (max-width: 26rem) {
  .store { padding: 0 1rem 0 .85rem; gap: .5rem; }
  .store b { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  a.store { transition: none; }
}