/* ==========================================================================
   AscendSX - yasal ve destek sayfalarının ortak stili

   Bu sayfalar React uygulamasının içinde değil, public/ altında duran düz HTML
   dosyaları. Sebep tek cümlede: App Store Connect'e verilen gizlilik ve destek
   adresleri uygulamanın ömrü boyunca ayakta kalmak zorunda, ve JavaScript'e hiç
   bağlı olmayan bir sayfa bunu her zaman yapar.

   İki şey daha bu kararı zorluyor:

   1. main.jsx'teki yönlendirme bilerek tek bir if - "site iki şeydir, tanıtım
      sayfası ve konsol". Altı yasal adres o if'i bir rota tablosuna çevirirdi,
      oradan da bir router paketine bir adım kalır. Bu sayfaların uygulamayla
      paylaşacağı hiçbir durum yok; bedelini ödemeye değmez.
   2. Vite çıktısındaki CSS'in adı içerik özeti taşıyor (index-a1b2c3.css) ve her
      derlemede değişiyor. Elle yazılmış bir <link> ilk derlemede kırılırdı. Bu
      yüzden aşağıdaki palet index.css'ten kopya; palet değişirse iki dosyayı da
      güncelle.

   İngilizce sayfalar /en/ ALTINDA DEĞİL - /privacy/, /terms/, /support/.
   Bilerek: public/en/ diye gerçek bir klasör açarsak nginx'in
   `try_files $uri $uri/ /index.html` satırındaki `$uri/` adımı /en/ isteği için
   artık VAR OLAN bir dizin bulur, içinde index.html olmadığı için dizin
   listelemeyi yasaklar ve 403 döner. Yani şu an index.html fallback'i sayesinde
   çalışan İngilizce ana sayfa kaybolurdu. website/Jenkinsfile'daki smoke test bu
   kuralı her deploy'da kontrol ediyor.
   ========================================================================== */

:root {
  --bg: #05070f;
  --bg-alt: #070b16;
  --panel: #0d1322;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.14);
  --ink: #ffffff;
  --muted: #8b95ab;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --amber: #ffc24b;
  --radius: 18px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Poppins', var(--font);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--cyan);
}

a:hover {
  color: var(--violet);
}

.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* Üst şerit. İnceleyici bu sayfaya mağazadan doğrudan geliyor - buradan siteye
   ve diğer dile bir çıkış yoksa sitenin geri kalanını hiç görmüyor. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.topbar a {
  text-decoration: none;
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand span {
  background: linear-gradient(115deg, #8b5cf6, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 36px 0 10px;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(19px, 3vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  scroll-margin-top: 20px;
}

h3 {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 26px 0 8px;
}

p,
li {
  color: #c7cede;
}

p {
  margin: 0 0 14px;
}

ul,
ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

li {
  margin-bottom: 8px;
}

strong {
  color: var(--ink);
}

.updated {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 28px;
}

/* Özet kutusu. Gizlilik metninin tamamını kimse okumuyor; en çok merak edilen
   dört cümle en üstte dursun. */
.callout {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 20px 22px 8px;
  margin: 0 0 28px;
}

.callout h2 {
  margin-top: 0;
}

.callout.warn {
  border-color: rgba(255, 194, 75, 0.4);
  background: rgba(255, 194, 75, 0.07);
}

.callout.warn strong {
  color: var(--amber);
}

/* Tablo dar ekranda kendi içinde kaysın; sayfanın tamamı yana kaymasın. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 15px;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

th {
  background: var(--bg-alt);
  color: var(--ink);
  font-weight: 600;
}

td {
  color: #c7cede;
}

/* İçindekiler. Uzun metinde bir maddeye doğrudan bağlantı verebilmek gerekiyor:
   footer'daki "Çerez Politikası" ayrı bir sayfa değil, bu metnin içindeki bir
   başlık. */
.toc {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 0 0 32px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
}

.toc li {
  margin-bottom: 4px;
}

/* Bağlantıyla gelinen başlık bir an parlasın - #cerezler ile açılan sayfada
   okuyucu nereye düştüğünü yoksa göremiyor. */
:target {
  animation: legal-flash 1.6s ease-out;
}

@keyframes legal-flash {
  from {
    background: rgba(34, 211, 238, 0.16);
  }
  to {
    background: transparent;
  }
}

.foot {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

@media print {
  /* Sözleşmeler yazdırılıyor. Siyah zemin bir sayfa dolusu toneri yakar. */
  body {
    background: #fff;
    color: #000;
  }

  p,
  li,
  td {
    color: #222;
  }

  a {
    color: #000;
  }

  .topbar,
  .toc {
    display: none;
  }
}