/* =============================================================================
   Crownie — tanıtım sayfası (crownie.app kökü)
   =============================================================================
   Değişkenler `web/styles.css` ile BİREBİR aynı: aynı marka iki sayfada farklı
   görünmesin. Değiştirirken ikisini birlikte değiştir; yarıçaplar ayrıca
   iOS'taki `BQP.Metrics` ile eşleşiyor.

   Bu sayfanın tek işi App Store'a göndermek. Form yok, izleme yok, çerez yok —
   o yüzden çerez bandı da yok.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --paper:      hsl(45 100% 95%);
  --dot:        hsl(40 50% 86%);
  --card:       #FFFDF6;

  --ink:        hsl(22 60% 12%);
  --ink-2:      hsl(22 25% 35%);
  --ink-3:      hsl(25 15% 52%);

  --red:        hsl(9 85% 57%);
  --on-red:     #FFFDF6;
  --yellow:     hsl(45 96% 64%);
  --pink:       hsl(340 75% 66%);
  --green:      hsl(145 55% 42%);
  --blue:       hsl(215 80% 55%);
  --on-color:   hsl(22 60% 12%);

  --focus:      hsl(215 80% 40%);

  /* Logo renkleri — web/styles.css ile aynı. Sayfa paletinden ayrılar:
     arayüz krem kağıt + koyu mürekkep dilinde, logo kendi paletinde
     (design/README.md). Gövde her zaman kiremit, değişen yalnızca taç.
     `-inv` sürümü, sayfanın TERSİ zemine oturan yerler için (marka rozeti
     `--ink` zeminde duruyor, yani açık temada koyu). */
  --brand-lock:      #C75B39;
  --brand-crown:     #3E6B54;   /* çam — açık zeminde */
  --brand-crown-inv: #D9A036;   /* hardal — koyu zeminde */

  --bd:         2px;
  --bd-strong:  2.5px;
  --r-sm:       11px;
  --r:          16px;

  --sh-card:    0 3px 0 var(--ink);
  --sh-btn:     0 4px 0 var(--ink);
  --sh-sm:      0 2px 0 var(--ink);

  --font: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont,
          'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    hsl(25 18% 10%);
    --dot:      hsl(25 14% 20%);
    --card:     hsl(24 16% 14%);

    --ink:      hsl(45 60% 94%);
    --ink-2:    hsl(40 22% 80%);
    --ink-3:    hsl(38 12% 64%);

    --red:      hsl(9 85% 62%);
    --on-red:   hsl(22 60% 10%);
    --yellow:   hsl(45 96% 64%);
    --pink:     hsl(340 75% 72%);
    --green:    hsl(145 50% 60%);
    --blue:     hsl(215 80% 70%);
    --on-color: hsl(22 60% 10%);

    --focus:    hsl(45 96% 64%);

    --brand-crown:     #D9A036;
    --brand-crown-inv: #3E6B54;
  }
}

* { box-sizing: border-box; }

/* Yalnızca `<symbol>` taşıyan görünmez SVG; akıştan çıkması gerekiyor.
   Konum burada, çünkü `web/_headers`'taki CSP `style-src` `'unsafe-inline'`
   taşımıyor ve `style="position:absolute"` BLOKLANIYORDU — konsola iki hata
   düşüyordu. Görünür bir zararı yoktu (eleman zaten 0×0) ama bloklanan bir
   stil, sonradan ona güvenen biri için sessiz bir tuzak. */
.svg-defs { position: absolute; width: 0; height: 0; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 14px;
  background: var(--yellow);
  color: var(--on-color);
  border: var(--bd) solid var(--ink);
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 10;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Üst çubuk ---------------------------------------------------- */
/* Üç sütun: boş · marka · dil düğmesi. `space-between` yerine ızgara, çünkü
   marka GERÇEKTEN ortada kalmalı — düğmenin genişliği dile göre değişiyor
   ("EN" / "TR") ve `space-between` markayı her geçişte kaydırırdı. */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 16px 4px;
}

.topbar .brand { grid-column: 2; }

/* Dil düğmesi. Misafir sayfasındaki `.chip-btn` ile aynı görünüm; o dosya
   (`web/styles.css`) buraya dahil değil, bu yüzden kalıp kopyalandı. */
.lang-btn {
  grid-column: 3;
  justify-self: end;
  font: inherit;
  font-weight: 800;
  font-size: .95rem;
  /* 44px: dokunma hedefi alt sınırı. */
  min-height: 44px;
  min-width: 52px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--card);
  border: var(--bd) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--sh-sm);
  cursor: pointer;
}

.lang-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .13em;
  /* Büyütme dile duyarlı: marka `lang="en"` taşımazsa Türkçe kuralı
     uygulanıyor ve "i" noktalı "İ" oluyor. */
  text-transform: uppercase;
  padding: 11px 22px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
  /* Hafif eğik: uygulamadaki "sticker" hissi. Amblemin kendisi eğik DEĞİL —
     rozetle birlikte dönüyor, tek başına eğilmiyor (tasarım: logo statik). */
  transform: rotate(-1.5deg);

  /* Rozet sayfanın TERSİ zeminde (`--ink`), o yüzden taç da ters sürümü
     alıyor: açık temada hardal, koyu temada çam. */
  --brand-crown: var(--brand-crown-inv);
}
/* Çizim amblem — taçlı kilit. Renkler `--brand-*` jetonlarından geliyor;
   kilit deliği gerçek delik olduğu için hangi zemine konursa doğru çıkıyor.
   Emoji bunu yapamazdı, her platformda ayrı bir çizim. */
.ico {
  display: inline-block;
  vertical-align: -.12em;
  overflow: visible;
}
/* Oran 64:84 — yükseklik genişliğin 1,3125 katı. */
.ico-brand { width: 1.05em; height: 1.38em; }
.ico-foot  { width: .80em;  height: 1.05em; vertical-align: -.22em; }

.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Ana yerleşim ------------------------------------------------- */
main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 18px 8px;
}

section + section { margin-top: 34px; }

/* ---------- Hero --------------------------------------------------------- */
.hero { text-align: center; }

h1 {
  font-size: clamp(2.1rem, 9.5vw, 3rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 6px 0 0;
}

/* Vurgulu sözcük: uygulamadaki sarı işaretleyici. */
.mark {
  display: inline-block;
  background: var(--yellow);
  color: var(--on-color);
  padding: 0 .22em .06em;
  border-radius: var(--r-sm);
  transform: rotate(-1deg);
}

/* ---------- Çağrı düğmesi ------------------------------------------------ */
.cta-wrap { margin-top: 30px; }

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 28px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--on-red);
  background: var(--red);
  border: var(--bd-strong) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--sh-btn);
  transition: transform .08s ease, box-shadow .08s ease;
}
.cta:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

/* Yayındayken CTA, Apple'ın RESMÎ rozeti. Kırmızı düğme kabuğu YOK: rozet
   kendisi düğme ve Apple onu başka bir düğmenin içine gömmeyi, çerçevelemeyi
   ya da yeniden renklendirmeyi yasaklıyor. Tek dokunduğumuz şey ölçek. */
.cta-badge {
  display: inline-block;
  /* Zorunlu boşluk: rozet yüksekliğinin en az %10'u kadar temiz alan. */
  padding: 6px;
  border-radius: var(--r-sm);
}

.cta-badge img {
  display: block;
  /* Yükseklik sabit, genişlik serbest — TR rozeti (151×40) İngilizceden
     (120×40) daha geniş ve sabit genişlik ikisinden birini eziyor. */
  height: 54px;
  width: auto;
}

.cta-badge:active { transform: translateY(3px); }

/* Uygulama henüz yayında değilken: aynı kutu, tıklanamaz ve sebebi yazıyor.
   Olmayan bir App Store sayfasına göndermektense beklediğini söylemek. */
.cta[aria-disabled="true"] {
  background: var(--card);
  color: var(--ink-2);
  cursor: default;
  box-shadow: var(--sh-sm);
}
.cta[aria-disabled="true"]:active { transform: none; box-shadow: var(--sh-sm); }

/* ---------- Açıklama kutusu --------------------------------------------- */
h2 {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px 2px;
}

.point {
  padding: 18px;
  background: var(--card);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
}

.point-text {
  margin: 0;
  font-size: .97rem;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---------- Alt bilgi ---------------------------------------------------- */
footer {
  margin-top: 40px;
  padding: 22px 18px 30px;
  text-align: center;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-3);
  border-top: var(--bd) dashed var(--ink-3);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-bottom: 10px;
}

footer a {
  color: var(--ink-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
footer a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .brand, .mark { transform: none; }
}

/* ---------- Geniş ekran ---------------------------------------------------
   Mobilde sayfa zaten ekranı dolduruyor. Masaüstünde içerik üste yapışıp
   altta büyük bir boşluk bırakıyordu; dikeyde ortalanınca kompozisyon
   toparlanıyor. Tipografi de biraz büyüyor — 17px gövde 1280px ekranda
   olduğundan küçük duruyor. */
@media (min-width: 760px) {
  main {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 24px;
  }

  h1 { font-size: 3.5rem; }

  .cta {
    font-size: 1.15rem;
    min-height: 62px;
    padding: 16px 34px;
  }

  .point { padding: 24px; }
  .point-text { font-size: 1.05rem; line-height: 1.65; }

  section + section { margin-top: 40px; }

  .topbar { padding-top: 30px; }

  /* Amblem boyutu ekranla ölçekleniyor: 760px'de taşmıyor, geniş ekranda
     hero öğesi gibi duruyor. Üst sınır bilerek var — sınırsız büyürse
     2560px'lik bir ekranda sayfanın tamamı rozet olur. */
  .brand {
    font-size: clamp(1.7rem, 4.2vw, 4.2rem);
    padding: clamp(16px, 1.8vw, 26px) clamp(24px, 3vw, 42px);
    gap: clamp(12px, 1.4vw, 22px);
    letter-spacing: .11em;
  }
}