/* ==========================================================================
   Yerel fontlar (SIL Open Font License 1.1 — lisanslar: assets/fonts/OFL-*.txt)
   Google sunucularına istek yapılmaz. Türkçe karakterler: ç ö ü ı "latin",
   ğ ş İ "latin-ext" dosyasındadır; tarayıcı yalnızca gereken dosyayı indirir.
   ========================================================================== */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/unbounded-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/unbounded-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   ÇBY Global — Tasarım sistemi (design tokens)
   Marka renkleri, tipografi, boşluk ve hareket değerleri tek noktadan yönetilir.
   ========================================================================== */

:root {
  /* --- Marka renkleri (tek kaynak) ----------------------------------------
     Koyu mürdüm zemin, kontrollü lavanta vurgu ve logodaki maviyle uyumlu ölçülü mavi.
     Bileşenler bu ham değerleri doğrudan değil, aşağıdaki anlamsal rolleri kullanır. */
  --color-bg:          #17111F;  /* ana arka plan — koyu mürdüm */
  --color-bg-deep:     #110C17;  /* footer, final çağrı */
  --color-surface:     #21192B;  /* ikincil yüzey — mor-antrasit */
  --color-card:        #292033;  /* kart yüzeyi */
  --color-card-hover:  #30263B;
  --color-border:      #403449;
  --color-border-strong: #56485F;
  --color-text:        #F5F1F7;  /* kırık beyaz */
  --color-text-muted:  #B9AFBF;  /* gri-lavanta */
  --color-text-faint:  #9E93A6;
  --color-accent:      #B79AFF;  /* lavanta */
  --color-accent-soft: #D3C4FF;
  --color-accent-deep: #5B3FC4;  /* açık zeminde lavanta metin */
  --color-accent-blue: #5D91F0;  /* logodaki maviyle uyumlu ikincil vurgu */
  --color-blue-soft:   #9DBDF7;
  --color-blue-deep:   #2F5FC4;  /* açık zeminde mavi metin */
  --color-light:       #F5F1F7;  /* açık bölüm zemini (logo beyazıyla uyumlu) */
  --color-light-2:     #E8E2EE;  /* açık zeminde ikincil yüzey (tarayıcı çubuğu vb.) */
  --color-ink:         #17111F;  /* açık zemin / vurgu üzerindeki koyu metin */

  /* --- Geriye dönük ham adlar (mevcut bileşenler bunları kullanıyor) ------- */
  --plum-950: var(--color-bg-deep);
  --plum-900: var(--color-bg);
  --plum-800: var(--color-surface);
  --plum-700: var(--color-card);
  --carbon-900: #141018;
  --carbon-800: var(--color-surface);
  --lilac-300: var(--color-accent-soft);
  --lilac-400: var(--color-accent);
  --lilac-500: #9C7FF5;
  --lilac-700: var(--color-accent-deep);
  --blue-300: var(--color-blue-soft);
  --blue-400: var(--color-accent-blue);
  --blue-600: var(--color-blue-deep);
  --ivory-50:  #FBF9FC;
  --ivory-100: var(--color-light);
  --ivory-300: #D8D0DD;

  /* --- Anlamsal roller --------------------------------------------------- */
  --bg:            var(--color-bg);
  --bg-deep:       var(--color-bg-deep);
  --bg-alt:        var(--color-surface);
  --surface:       var(--color-surface);
  --surface-2:     var(--color-card);
  --surface-glass: rgba(33, 25, 43, 0.86);
  --line:          var(--color-border);
  --line-strong:   var(--color-border-strong);

  --text:          var(--color-text);
  --text-muted:    var(--color-text-muted);
  --text-faint:    var(--color-text-faint);

  --accent:        var(--color-accent);
  --accent-2:      var(--color-accent-blue);
  --accent-ink:    var(--color-ink);   /* vurgu zemin üzerindeki metin */

  --light-bg:      var(--color-light);
  --light-text:    var(--color-ink);
  --light-muted:   #5A5062;
  --light-line:    rgba(23, 17, 31, 0.12);

  --focus:         var(--color-accent-blue);

  /* Gradient ve parıltılar ölçülü: lavanta → mavi, pembe ara ton yok */
  --grad-brand: linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent-blue) 100%);
  --grad-glow:  radial-gradient(closest-side, rgba(183, 154, 255, 0.22), transparent);
  --glow-accent: rgba(183, 154, 255, 0.16);
  --glow-blue:   rgba(93, 145, 240, 0.12);

  /* --- Tipografi --------------------------------------------------------- */
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Instrument Serif", Georgia, serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-xl:   clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-2xl:  clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  --fs-hero: clamp(2.3rem, 0.8rem + 3.9vw, 5rem);

  /* --- Boşluk, yarıçap, gölge ------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: clamp(4.5rem, 3rem + 6vw, 9rem);

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 1240px;

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 20px 60px -20px rgba(8, 4, 14, 0.7);
  --shadow-glow: 0 0 0 1px rgba(183, 154, 255, 0.3), 0 14px 36px -14px rgba(183, 154, 255, 0.4);

  /* --- Hareket ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur:      420ms;
  --dur-slow: 900ms;

  --header-h: 72px;

  /* --- Durum renkleri (form, uyarı) ------------------------------------- */
  --state-error:        #FF8A8A;
  --state-error-text:   #FFB3B3;
  --state-error-bg:     rgba(255, 138, 138, 0.07);
  --state-error-line:   rgba(255, 138, 138, 0.5);
  --state-success:      #9FE0C0;
  --state-success-bg:   rgba(159, 224, 192, 0.08);
  --state-success-line: rgba(159, 224, 192, 0.5);
  --state-disabled-opacity: 0.7;

  /* --- Form alanları ------------------------------------------------------ */
  --field-height: 52px;
  --field-radius: var(--radius-sm);
  --field-bg: var(--color-bg);        /* koyu iç zemin: alan, form kartından ayrışır */
  --field-bg-focus: var(--color-bg-deep);
  --field-border: #7A6C84;              /* form alanı kenarlığı: koyu yüzeylerde ≥3:1 (WCAG 1.4.11) */
  --field-focus-ring: 0 0 0 3px rgba(180, 154, 255, 0.25);

  /* --- Kırılım noktaları ---------------------------------------------------
     CSS @media sorguları değişken kabul etmediği için aynı değerler stil dosyalarında
     sabit yazılır; bu tablo tek referans kaynağıdır (JS matchMedia da bunları kullanır).
       --bp-sm  520px  küçük telefon  → tek sütun butonlar
       --bp-md  760px  büyük telefon  → iki sütunlu kart ızgaraları teke iner
       --bp-lg  900px  tablet         → yan yana bölümler alt alta
       --bp-xl 1080px  küçük dizüstü  → masaüstü menü yerine mobil menü
     ------------------------------------------------------------------------ */
  --bp-sm: 520px;
  --bp-md: 760px;
  --bp-lg: 900px;
  --bp-xl: 1080px;

  /* --- Katman sırası (z-index) ------------------------------------------ */
  --z-below:   -1;   /* dekoratif arka planlar */
  --z-raise:    1;   /* kart içi tıklama alanları, panel katmanı */
  --z-overlay:  2;   /* rozetler, etiketler, menü düğmesi */
  --z-header:  50;   /* sabit üst menü ve mega panel */
  --z-drawer:  80;   /* menü paneli ve karartma */
  --z-grain:  100;   /* film greni (tıklamayı engellemez) */
  --z-skip:   200;   /* "içeriğe geç" bağlantısı */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}