/* ==========================================================================
   Haritada Coğrafya — tanıtım sitesi tasarım token'ları

   Bu dosya, Claude Design ile hazırlanan "Organic" tasarım sisteminin
   (handoff paketindeki _ds/.../styles.css) Haritada Coğrafya mobil
   uygulamasıyla PAYLAŞTIĞI renk/tipografi diline dayanıyor — accent rengi
   (#c67139) ve kağıt tonu zemin (#f5ead8), uygulamanın kendi "Organic"
   paletiyle aynı aileden.

   Fontlar Google Fonts CDN'inden DEĞİL, yerel dosyalardan yükleniyor
   (assets/fonts/) — hem üçüncü taraf bir isteğe gerek kalmıyor (gizlilik +
   hız), hem de Flutter uygulamasıyla birebir aynı font dosyaları kullanılmış
   oluyor. Başlık fontu tasarımda "Caprasimo" idi; mobil uygulama Caprasimo'da
   ğ/ş/İ gibi Türkçe harflerin eksik olduğunu fark edip Alfa Slab One'a
   geçmişti (bkz. cografya_app/CLAUDE.md) — aynı düzeltme burada da baştan
   uygulanıyor, Caprasimo hiç yüklenmiyor.
   ========================================================================== */

@font-face {
  font-family: "Alfa Slab One";
  src: url("../assets/fonts/AlfaSlabOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-surface-2: #fffaf1;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Alfa Slab One", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; }

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* — küçük, tekrar kullanılan bileşen sınıfları — */

.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: 0.02em;
  padding: 4px 12px; border-radius: 999px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 400;
  font-size: 15px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 12px 22px; border-radius: 999px;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn svg { display: block; }
.btn-primary { background: var(--color-accent); color: #fffaf1; }
.btn-primary:hover { background: var(--color-accent-600); color: #fffaf1; }
.btn-ghost { color: var(--color-accent-700); padding-inline: 4px; }
.btn-ghost:hover { color: var(--color-accent-800); }