/* Etesio kimlik katmani
   Renk, tipografi, bosluk ve kose dili buradan gelir.
   Bilesenler bu degiskenleri kullanir - elle renk yazilmaz.

   Marka: mor-altin (03.08.2026 karari).
   Mor tek basina kalirsa piyasadaki SaaS sablonlarina benzer;
   altin vurgu ayirt edici olani. */

:root {
  color-scheme: light;

  /* ── Marka ── */
  --mor-900: #1d1225;
  --mor-800: #2a1a36;
  --mor-700: #3b2450;
  --mor-600: #4f2f6b;
  --mor-500: #6b3f8f;
  --mor-400: #8b5cb0;
  --mor-300: #b18fd0;
  --mor-200: #d8c4e8;
  --mor-100: #efe7f6;

  --altin-600: #9a7420;
  --altin-500: #c2952c;
  --altin-400: #d9ae45;
  --altin-300: #e8c877;
  --altin-100: #f7ecd0;

  /* ── Anlam ── */
  --ana: var(--mor-600);
  --ana-koyu: var(--mor-700);
  --ana-acik: var(--mor-400);
  --vurgu: var(--altin-500);
  --vurgu-acik: var(--altin-300);

  --basari: #2f7a55;
  --uyari: #a76b12;
  --tehlike: #a33a3a;

  /* ── Zemin ve metin ── */
  --zemin: #ffffff;
  --zemin-2: #f7f5fa;
  --zemin-3: #efebf4;
  --kart: #ffffff;
  --kenar: #e3dcec;
  --kenar-koyu: #cfc4dc;

  --metin: #241a2e;
  --metin-2: #574a63;
  --metin-3: #7d7189;
  --metin-ters: #ffffff;

  /* ── Tipografi ── */
  --yazi-baslik: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --yazi-govde: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --olcek-1: 0.78rem;
  --olcek-2: 0.875rem;
  --olcek-3: 1rem;
  --olcek-4: 1.125rem;
  --olcek-5: 1.375rem;
  --olcek-6: 1.75rem;
  --olcek-7: 2.25rem;
  --olcek-8: 3rem;
  --olcek-9: 3.75rem;

  /* ── Bosluk ritmi (1.5 kat) ── */
  --aralik-1: 0.25rem;
  --aralik-2: 0.5rem;
  --aralik-3: 0.75rem;
  --aralik-4: 1rem;
  --aralik-5: 1.5rem;
  --aralik-6: 2rem;
  --aralik-7: 3rem;
  --aralik-8: 4rem;
  --aralik-9: 6rem;

  /* ── Kose dili: yumusak ama yuvarlak degil ── */
  --kose-kucuk: 6px;
  --kose-orta: 10px;
  --kose-buyuk: 16px;
  --kose-tam: 999px;

  /* ── Derinlik: golge yerine kenar + ince katman ── */
  --golge-1: 0 1px 2px rgba(36, 26, 46, .06);
  --golge-2: 0 4px 16px rgba(36, 26, 46, .08);
  --golge-3: 0 12px 40px rgba(36, 26, 46, .12);

  --gecis: 180ms cubic-bezier(.4, 0, .2, 1);
  --kapsayici: 1180px;
}

/* ── Koyu tema ── */
:root[data-tema="koyu"] {
  color-scheme: dark;

  --zemin: #14101a;
  --zemin-2: #1b1523;
  --zemin-3: #241c2e;
  --kart: #1f1828;
  --kenar: #332a41;
  --kenar-koyu: #453a56;

  --metin: #f2eef7;
  --metin-2: #c3b8d0;
  --metin-3: #948aa1;
  --metin-ters: #14101a;

  --ana: var(--mor-300);
  --ana-koyu: var(--mor-200);
  --ana-acik: var(--mor-400);
  --vurgu: var(--altin-400);
  --vurgu-acik: var(--altin-300);

  --golge-1: 0 1px 2px rgba(0, 0, 0, .4);
  --golge-2: 0 4px 16px rgba(0, 0, 0, .45);
  --golge-3: 0 12px 40px rgba(0, 0, 0, .55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    color-scheme: dark;
    --zemin: #14101a;
    --zemin-2: #1b1523;
    --zemin-3: #241c2e;
    --kart: #1f1828;
    --kenar: #332a41;
    --kenar-koyu: #453a56;
    --metin: #f2eef7;
    --metin-2: #c3b8d0;
    --metin-3: #948aa1;
    --metin-ters: #14101a;
    --ana: var(--mor-300);
    --ana-koyu: var(--mor-200);
    --vurgu: var(--altin-400);
    --golge-1: 0 1px 2px rgba(0, 0, 0, .4);
    --golge-2: 0 4px 16px rgba(0, 0, 0, .45);
    --golge-3: 0 12px 40px rgba(0, 0, 0, .55);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--olcek-3);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 var(--aralik-4);
  color: var(--metin);
}

p { margin: 0 0 var(--aralik-4); color: var(--metin-2); }
a { color: var(--ana); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--ana-koyu); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
  border-radius: var(--kose-kucuk);
}

.kapsayici {
  width: min(100% - 2.5rem, var(--kapsayici));
  margin-inline: auto;
}

.atla {
  position: absolute;
  left: -9999px;
  top: var(--aralik-3);
  background: var(--ana);
  color: var(--metin-ters);
  padding: var(--aralik-3) var(--aralik-5);
  border-radius: var(--kose-orta);
  z-index: 100;
}
.atla:focus { left: var(--aralik-4); }