/* ============================================================================
   LinguMonster — Landing Tasarım Sistemi (Design System)
   ----------------------------------------------------------------------------
   Tek doğ­ruluk kaynağı: renk/tipografi/boşluk/köşe/gölge/hareket token'ları.
   App.razor'da EN SON yüklenir; .lm-landing için otoriter katmandır.

   Kimlik kararları (bu oturumda kilitlendi):
   • Renk    : indigo→mor marka DNA'sı + nötr slate gamı + TEK sıcak aksan (kehribar).
               Eski altın/mercan/teal emekli; landing.css'teki o değişkenler
               aşağıda kısıtlı palete yeniden eşlendi (sayfalar otomatik düzelir).
   • Tipografi: Başlık = Bricolage Grotesque (self-host), Gövde = Hanken Grotesk.
   • His      : güvenli & net — bol boşluk, ölçülü hareket, tek güçlü gradyan.
   ============================================================================ */

/* ───────────────────────────── Fontlar (self-host, variable) ───────────────── */
/* Bricolage Grotesque — başlık/display */
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/bricolage-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: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/bricolage-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;
}
/* Hanken Grotesk — gövde/UI */
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/hanken-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: "Hanken Grotesk";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/hanken-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;
}

/* ───────────────────────────── Token'lar ──────────────────────────────────── */
:root {
    /* — Marka: indigo gamı — */
    --lm-indigo-50:  #EEF1FE;
    --lm-indigo-100: #E0E6FD;
    --lm-indigo-200: #C6D0FB;
    --lm-indigo-300: #A3B1F5;
    --lm-indigo-400: #8295F1;
    --lm-indigo-500: #667EEA;   /* marka primary */
    --lm-indigo-600: #566FD8;
    --lm-indigo-700: #4C5FC0;
    --lm-indigo-800: #3E4C9A;
    --lm-indigo-900: #343F7A;
    /* — Marka: mor ucu — */
    --lm-purple-400: #9B74C4;
    --lm-purple-500: #845BB3;
    --lm-purple-600: #764BA2;   /* gradyan bitişi */
    --lm-purple-700: #653E8C;

    /* — İmza gradyanı — */
    --lm-grad:        linear-gradient(135deg, var(--lm-indigo-500), var(--lm-purple-600));
    --lm-grad-strong: linear-gradient(135deg, var(--lm-indigo-600), var(--lm-purple-700));
    --lm-grad-soft:   linear-gradient(135deg, var(--lm-indigo-50), #F3EEFA);

    /* — Nötr: slate gamı — */
    --lm-slate-50:  #F8FAFC;
    --lm-slate-100: #F1F5F9;
    --lm-slate-200: #E2E8F0;
    --lm-slate-300: #CBD5E1;
    --lm-slate-400: #94A3B8;
    --lm-slate-500: #64748B;
    --lm-slate-600: #475569;
    --lm-slate-700: #334155;
    --lm-slate-800: #1E293B;
    --lm-slate-900: #0F172A;

    /* — Tek sıcak aksan: kehribar — */
    --lm-amber-300: #FCD34D;
    --lm-amber-400: #FBBF24;
    --lm-amber-500: #F59E0B;
    --lm-amber-600: #D97706;
    --lm-amber-soft: #FEF3C7;

    /* — Fonksiyonel — */
    --lm-success:      #16A34A;
    --lm-success-soft: #DCFCE7;
    --lm-warning:      #D97706;
    --lm-warning-soft: #FEF3C7;
    --lm-danger:       #DC2626;
    --lm-danger-soft:  #FEE2E2;

    /* — Semantik roller (açık sahne: aydınlık, güven veren pazarlama sitesi) — */
    --lm-bg:            #FFFFFF;
    --lm-bg-soft:       #F6F7FB;   /* alt sayfa gövdesi */
    --lm-surface:       #FFFFFF;
    --lm-surface-soft:  var(--lm-slate-50);
    --lm-ink:           var(--lm-slate-800);
    --lm-ink-strong:    var(--lm-slate-900);
    --lm-ink-muted:     var(--lm-slate-600);
    --lm-ink-subtle:    var(--lm-slate-500);
    --lm-border:        #E6E8F2;
    --lm-border-soft:   #EEF0F7;
    --lm-border-strong: var(--lm-slate-300);

    --lm-primary:       var(--lm-indigo-500);
    --lm-primary-strong:var(--lm-indigo-600);
    --lm-primary-soft:  var(--lm-indigo-50);
    --lm-on-primary:    #FFFFFF;
    --lm-accent:        var(--lm-amber-400);
    --lm-accent-strong: var(--lm-amber-500);
    --lm-accent-soft:   var(--lm-amber-soft);
    --lm-on-accent:     #3A2A00;
    --lm-focus-ring:    0 0 0 3px rgba(102, 126, 234, .35);

    /* — Tipografi — */
    --lm-font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lm-font-sans:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lm-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --lm-text-xs:   .75rem;    /* 12 */
    --lm-text-sm:   .875rem;   /* 14 */
    --lm-text-base: 1rem;      /* 16 */
    --lm-text-lg:   1.125rem;  /* 18 */
    --lm-text-xl:   1.25rem;   /* 20 */
    --lm-text-2xl:  1.5rem;    /* 24 */
    --lm-text-3xl:  1.875rem;  /* 30 */
    --lm-text-4xl:  2.25rem;   /* 36 */
    --lm-text-5xl:  3rem;      /* 48 */
    /* akıcı display ölçekleri */
    --lm-display-1: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
    --lm-display-2: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    --lm-display-3: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);

    --lm-leading-tight: 1.12;
    --lm-leading-snug:  1.3;
    --lm-leading-normal:1.6;
    --lm-tracking-tight: -.02em;
    --lm-tracking-snug:  -.01em;
    --lm-weight-normal: 400;
    --lm-weight-medium: 500;
    --lm-weight-semi:   600;
    --lm-weight-bold:   700;
    --lm-weight-black:  800;

    /* — Boşluk ölçeği (4px tabanı) — */
    --lm-space-1:  .25rem;
    --lm-space-2:  .5rem;
    --lm-space-3:  .75rem;
    --lm-space-4:  1rem;
    --lm-space-5:  1.25rem;
    --lm-space-6:  1.5rem;
    --lm-space-8:  2rem;
    --lm-space-10: 2.5rem;
    --lm-space-12: 3rem;
    --lm-space-16: 4rem;
    --lm-space-20: 5rem;
    --lm-space-24: 6rem;
    --lm-section-y: clamp(3.5rem, 8vw, 6rem);

    /* — Köşe yarıçapı (12/14/18/20/25/30 kaosunu toplar) — */
    --lm-radius-sm:   8px;
    --lm-radius-md:   12px;
    --lm-radius-lg:   16px;
    --lm-radius-xl:   24px;
    --lm-radius-pill: 999px;

    /* — Gölge / yükseklik (indigo-tonlu, zarif) — */
    --lm-shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
    --lm-shadow-sm: 0 2px 8px rgba(16, 24, 40, .06);
    --lm-shadow-md: 0 8px 24px rgba(102, 126, 234, .10);
    --lm-shadow-lg: 0 16px 40px rgba(102, 126, 234, .14);
    --lm-shadow-xl: 0 28px 64px rgba(102, 126, 234, .18);
    --lm-shadow-primary: 0 10px 24px rgba(102, 126, 234, .35);
    --lm-shadow-accent:  0 10px 24px rgba(245, 158, 11, .30);

    /* — Hareket — */
    --lm-ease:     cubic-bezier(.4, 0, .2, 1);
    --lm-ease-out: cubic-bezier(.16, 1, .3, 1);
    --lm-dur-fast: 150ms;
    --lm-dur-base: 240ms;
    --lm-dur-slow: 400ms;

    /* — Düzen — */
    --lm-container:        1200px;
    --lm-container-narrow: 960px;
    --lm-container-wide:   1240px;
}

/* ───────────────────────────── Temel tipografi (.lm-landing) ───────────────── */
/* NOT: Bilerek yalnızca font-family + izleme ayarlanır; renk/ağırlık/boyut
   component kurallarına bırakılır ki hero üzeri beyaz başlıklar vb. bozulmasın. */
.lm-landing {
    font-family: var(--lm-font-sans);
    color: var(--lm-ink);
    font-size: 16px;
    line-height: var(--lm-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.lm-landing :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--lm-font-display);
    letter-spacing: var(--lm-tracking-tight);
}
.lm-landing :is(h1, h2) { font-weight: var(--lm-weight-black); line-height: var(--lm-leading-tight); }
.lm-landing :is(h3, h4, h5, h6) { font-weight: var(--lm-weight-bold); line-height: var(--lm-leading-snug); }
.lm-landing :is(input, select, textarea, button) { font-family: inherit; }

/* Erişilebilir, marka-tonlu odak halkası */
.lm-landing a:focus-visible,
.lm-landing button:focus-visible,
.lm-landing input:focus-visible,
.lm-landing select:focus-visible,
.lm-landing textarea:focus-visible {
    outline: none;
    box-shadow: var(--lm-focus-ring);
    border-radius: var(--lm-radius-sm);
}
/* Programatik odak hedefleri (Blazor gezinmede tabindex=-1'e odaklanır) halka göstermesin */
.lm-landing [tabindex="-1"]:focus,
.lm-landing [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* ─────────────── Eski değişkenleri kısıtlı palete yeniden eşle ──────────────── */
/* landing.css bu adları .lm-landing üstünde tanımlıyor; bu dosya SONRA yüklendiği
   için buradaki değerler kazanır → tüm altın/mercan/teal kullanımları otomatik
   olarak kehribar/yeşile döner, sayfaları tek tek düzenlemeye gerek kalmaz. */
.lm-landing {
    --lm-primary:      var(--lm-indigo-500);
    --lm-primary-dark: var(--lm-purple-600);
    --lm-gold:         var(--lm-amber-400);
    --lm-gold-light:   var(--lm-amber-300);
    --lm-coral:        var(--lm-amber-500);
    --lm-coral-dark:   var(--lm-amber-600);
    --lm-teal:         var(--lm-success);
}

/* ─────────────── Hareket disiplini: gimmick'leri sustur ─────────────────────── */
/* "Her şey hareket ediyor" kaosunun panzehiri: sonsuz dönen/yüzen/kayan
   dekoratif animasyonları durdur, dekoratif şeritleri tek marka gradyanına indir. */
.lm-landing .lm-slide img { animation: none; }                 /* hero sonsuz zoom */
.lm-landing .lm-slide::after { animation: none; }              /* yüzen-dönen orb */
.lm-landing .lm-teacher-card::before,
.lm-landing .lm-stat::before {
    animation: none;
    background: var(--lm-grad);                                /* gökkuşağı şerit → marka */
}

/* Hareket tercihine saygı: tüm lm-* animasyonlarını kapat */
@media (prefers-reduced-motion: reduce) {
    .lm-landing *,
    .lm-landing *::before,
    .lm-landing *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ───────────────────────────── Primitifler (token tabanlı) ─────────────────── */
/* İleride sayfaların geçeceği temiz buton ailesi. Mevcut sınıfları kırmaz;
   yeni işaretlemede .lm-btn kullanılır. */
.lm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lm-space-2);
    padding: .75rem 1.5rem;
    border-radius: var(--lm-radius-md);
    font-family: var(--lm-font-sans);
    font-weight: var(--lm-weight-bold);
    font-size: var(--lm-text-base);
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--lm-dur-fast) var(--lm-ease),
                box-shadow var(--lm-dur-base) var(--lm-ease),
                background-color var(--lm-dur-fast) var(--lm-ease);
}
.lm-btn:active { transform: translateY(0); }
.lm-btn-lg { padding: .95rem 1.9rem; font-size: var(--lm-text-lg); }
.lm-btn-sm { padding: .55rem 1.1rem; font-size: var(--lm-text-sm); }

/* Birincil: imza gradyanı */
.lm-btn-primary {
    background-image: var(--lm-grad);
    color: var(--lm-on-primary);
    box-shadow: var(--lm-shadow-primary);
}
.lm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(102, 126, 234, .42); color: var(--lm-on-primary); }

/* Aksan: kehribar — ikincil ama dikkat çeken CTA */
.lm-btn-accent {
    background-color: var(--lm-accent);
    color: var(--lm-on-accent);
    box-shadow: var(--lm-shadow-accent);
}
.lm-btn-accent:hover { transform: translateY(-2px); background-color: var(--lm-accent-strong); color: var(--lm-on-accent); }

/* Hayalet/çizgili */
.lm-btn-outline {
    background: transparent;
    color: var(--lm-primary);
    border-color: var(--lm-border-strong);
}
.lm-btn-outline:hover { border-color: var(--lm-primary); background: var(--lm-primary-soft); color: var(--lm-primary-strong); }

/* Yumuşak doku */
.lm-btn-soft {
    background: var(--lm-primary-soft);
    color: var(--lm-primary-strong);
}
.lm-btn-soft:hover { background: var(--lm-indigo-100); transform: translateY(-2px); }

/* Yardımcılar */
.lm-text-gradient {
    background: var(--lm-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lm-surface-card {
    background: var(--lm-surface);
    border: 1px solid var(--lm-border-soft);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-md);
}