/* SelfPatch — içerik sayfaları ortak stil sistemi
 *
 * Buradan önce her sayfa kendi <style> bloğunu ve kendi paletini taşıyordu:
 * rehber/guide bir palet (#12141c/#00eaff — uygulamanın paleti), hakkında/
 * şartlar/gizlilik bambaşka bir palet (#0b1220/#27d3ff). İkisi tek sistemde
 * birleşti; kazanan uygulama paleti (lib/core/theme.dart ile aynı renkler).
 *
 * Kısıtlar (web/_headers):
 *   - Harici CSS/JS/font YOK. Bu dosya same-origin, fontlar web/fonts/ altında.
 *   - Derleme adımı YOK (Cloudflare Pages `web/` klasörünü olduğu gibi kopyalar),
 *     bu yüzden token'lar elle yazılmış HSL üçlüleri: hsl(var(--x) / .12) ile
 *     opaklık türetilebiliyor — Tailwind'in yaptığı işin elle hâli.
 */

/* ── Token'lar ─────────────────────────────────────────────────────────── */
:root {
  /* Yüzeyler — hsl(var(--x)) ya da hsl(var(--x) / .5) olarak kullanılır */
  --void: 228 22% 9%; /* #12141C  uygulama arka planı */
  --void-2: 227 26% 7%; /* #0D0F16  gradyan dibi */
  --surface: 224 22% 14%; /* #1B1F2A  kart */
  --surface-2: 228 19% 21%; /* #2C3040  ikincil yüzey */

  /* Vurgular */
  --accent: 185 100% 50%; /* #00EAFF  birincil */
  --success: 135 100% 50%; /* #00FF41  başarı / alıntı */
  --danger: 341 100% 58%; /* #FF2A6D */
  --gold: 51 100% 50%; /* #FFD700 */

  /* Metin */
  --fg: 217 100% 96%; /* #EAF2FF  gövde metni */
  --fg-strong: 0 0% 100%; /* başlıklar */
  --fg-muted: 220 31% 76%; /* #AEBBD4  ikincil metin */
  --fg-soft: 220 34% 79%; /* #B8C4DC  vurgulu terim */

  /* Kenarlıklar */
  --border: 223 32% 22%; /* #26304A */
  --border-subtle: hsl(var(--accent) / 0.08);
  --border-neutral: hsl(0 0% 100% / 0.08);
  --border-accent: hsl(var(--accent) / 0.35);

  /* Derinlik */
  --shadow-card: 0 4px 16px hsl(0 0% 0% / 0.25), 0 0 18px hsl(var(--accent) / 0.05);
  --shadow-hover: 0 8px 24px hsl(0 0% 0% / 0.35), 0 0 20px hsl(var(--accent) / 0.18);
  --glow-accent: 0 0 28px hsl(var(--accent) / 0.35);

  /* Boşluk ritmi */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Köşeler — uygulamadaki SoloTheme.radius* ile aynı ölçek */
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --content-w: 920px;

  --font-body:
    system-ui, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-display: "Orbitron", var(--font-body);
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* Orbitron yalnızca h1/marka için — 38 KB, swap ile bloklamıyor.
   JetBrains Mono bilerek yüklenmiyor: 187 KB, kazancı yok. */
@font-face {
  font-family: "Orbitron";
  src: url("fonts/Orbitron.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

/* ── Temel ─────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.65;
  color: hsl(var(--fg));
  background:
    radial-gradient(
      ellipse at 50% -10%,
      hsl(var(--accent) / 0.06) 0%,
      hsl(var(--void)) 55%,
      hsl(var(--void-2)) 100%
    );
  background-attachment: fixed;
}

.wrap {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-16);
}

/* ── Tipografi ─────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: hsl(var(--fg-strong));
  margin: var(--space-4) 0 var(--space-2);
}

h2 {
  font-size: clamp(21px, 3.4vw, 27px);
  color: hsl(var(--fg-strong));
  margin: var(--space-12) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid hsl(var(--border));
}

h3 {
  font-size: 19px;
  color: hsl(var(--accent));
  margin: var(--space-6) 0 var(--space-1);
}

p,
li {
  color: hsl(var(--fg-muted));
}

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

li {
  margin: var(--space-2) 0;
}

strong.k {
  color: hsl(var(--fg-soft));
}

.lead {
  font-size: 18px;
  color: hsl(var(--fg));
  margin: var(--space-3) 0 var(--space-1);
}

.lead strong {
  color: hsl(var(--accent));
}

.data-note {
  font-size: 13px;
  color: hsl(var(--fg-muted));
  font-style: italic;
}

/* Hakkında/About sayfalarındaki TR↔EN geçiş satırı. Eskiden satır içi
   style="color: var(--muted)" ile yazılıydı; token'lar HSL üçlüsüne
   dönünce satır içi kullanım geçersiz kaldı (color: 185 100% 50%). */
.lang-switch {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  color: hsl(var(--fg-muted));
}

.lang-switch a,
.lang-switch strong {
  color: hsl(var(--accent));
  text-decoration: none;
}

/* h1 arkasındaki yumuşak ışık — sayfanın üstüne derinlik verir */
.hero-glow {
  position: relative;
}

.hero-glow::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 260px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 40%, hsl(var(--accent) / 0.14), transparent 60%),
    radial-gradient(ellipse at 70% 30%, hsl(var(--success) / 0.08), transparent 55%);
  filter: blur(20px);
}

/* ── Marka başlığı ─────────────────────────────────────────────────────── */
header.brand,
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

header.brand img,
.brand img {
  width: 34px;
  height: 34px;
}

header.brand strong,
.brand strong {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: hsl(var(--fg-strong));
}

/* ── Yüzeyler ──────────────────────────────────────────────────────────── */
.card {
  background: hsl(var(--surface) / 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

.hover-lift {
  transition:
    transform 160ms ease-out,
    box-shadow 160ms ease-out,
    border-color 160ms ease-out;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-accent);
}

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: hsl(var(--success));
  background: hsl(var(--success) / 0.08);
  border: 1px solid hsl(var(--success) / 0.35);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.answer {
  color: hsl(var(--fg));
  font-weight: 600;
  font-size: 16.5px;
  border-left: 3px solid hsl(var(--accent));
  background: hsl(var(--accent) / 0.05);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--space-3) 0 var(--space-4);
}

.callout {
  background: linear-gradient(
    135deg,
    hsl(var(--accent) / 0.09),
    hsl(var(--surface))
  );
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  box-shadow: var(--shadow-card);
}

blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid hsl(var(--success));
  background: hsl(var(--success) / 0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: hsl(var(--fg));
  font-style: italic;
}

blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: 13px;
  color: hsl(var(--fg-muted));
}

details {
  background: hsl(var(--surface) / 0.85);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0 var(--space-6);
  margin: var(--space-3) 0;
  transition:
    border-color 160ms ease-out,
    background-color 160ms ease-out;
}

details:hover {
  border-color: var(--border-accent);
}

details summary {
  cursor: pointer;
  font-weight: 600;
  color: hsl(var(--fg));
  padding: var(--space-3) 0;
  font-size: 16px;
}

details[open] summary {
  color: hsl(var(--accent));
}

/* ── İçindekiler ───────────────────────────────────────────────────────── */
.toc {
  background: hsl(var(--surface) / 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  box-shadow: var(--shadow-card);
}

.toc h4 {
  margin: 0 0 var(--space-2);
  color: hsl(var(--accent));
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
}

.toc a {
  color: hsl(var(--fg-muted));
  text-decoration: none;
  transition: color 120ms ease-out;
}

.toc a:hover {
  color: hsl(var(--accent));
  text-decoration: underline;
}

/* ── Tablolar ──────────────────────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  margin: var(--space-4) 0;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
}

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

th,
td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: top;
}

thead th {
  background: hsl(var(--accent) / 0.07);
  color: hsl(var(--accent));
  font-weight: 700;
}

tbody tr:last-child td {
  border-bottom: none;
}

td:first-child,
th:first-child {
  color: hsl(var(--fg-soft));
  font-weight: 600;
}

.highlight-col {
  background: hsl(var(--accent) / 0.04);
}

/* ── Bağlantılar / butonlar ────────────────────────────────────────────── */
.cta {
  display: block;
  text-align: center;
  text-decoration: none;
  margin: var(--space-8) auto var(--space-2);
  max-width: 340px;
  background: hsl(var(--accent));
  color: hsl(var(--void));
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--glow-accent);
  transition:
    transform 160ms ease-out,
    box-shadow 160ms ease-out;
}

.cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 40px hsl(var(--accent) / 0.5);
}

.links {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.links a {
  text-decoration: none;
  background: hsl(var(--accent) / 0.08);
  border: 1px solid var(--border-accent);
  color: hsl(var(--accent));
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  transition:
    background-color 160ms ease-out,
    transform 160ms ease-out,
    box-shadow 160ms ease-out;
}

.links a:hover {
  background: hsl(var(--accent) / 0.14);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

footer {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid hsl(var(--border));
  font-size: 13px;
  color: hsl(var(--fg-muted));
}

footer a {
  color: hsl(var(--accent));
  text-decoration: none;
  margin-right: var(--space-4);
}

footer a:hover {
  text-decoration: underline;
}

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

/* ── Kaydırmayla açılma ────────────────────────────────────────────────── *
 * Gizleme SADECE reveal.js `js-reveal` sınıfını eklediyse geçerli. JavaScript
 * kapalıysa, dosya yüklenemezse veya sayfayı bir arama motoru botu çekiyorsa
 * hiçbir şey gizlenmez — içerik her hâlükârda görünür kalır.
 */
html.js-reveal .reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 500ms ease-out,
    transform 500ms ease-out;
}

html.js-reveal .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
}

@media (max-width: 560px) {
  .toc ul {
    columns: 1;
  }
}

/* Erişilebilirlik: kullanıcı hareketi azalttıysa hiçbir şey hareket etmez,
   hiçbir şey gizli kalmaz. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.js-reveal .reveal,
  html.js-reveal .reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
  }

  .hover-lift:hover,
  .cta:hover,
  .links a:hover {
    transform: none;
  }
}