/* ============================================================================
 * Studio OS — Design Tokens
 * Linear issue: TECH-5461 (F1.1)
 *
 * Bu dosya cleaned-style.min.css'ten SONRA yüklenir; mevcut TechBit teması
 * dokunulmadan kalır, yeni Studio OS bilesenleri bu tokenlari kullanir.
 *
 * Kaynak: TECHLIBERTY Design System/TechLiberty Redesign v2.html
 * ========================================================================== */

:root {
    /* Zemin & metin — sicak krem palette */
    --studio-cream: #F4F1EA;
    --studio-cream-2: #EAE6DC;
    --studio-cream-3: #DDD7C7;
    --studio-cream-soft: #FAF8F2;     /* admin/light sections */

    --studio-ink: #0B0B0F;             /* ana metin / kontrast bantlari */
    --studio-ink-2: #1A1A1F;
    --studio-ink-3: #26262E;

    --studio-line: rgba(11, 11, 15, 0.08);
    --studio-line-2: rgba(11, 11, 15, 0.14);
    --studio-line-dark: rgba(255, 255, 255, 0.08);

    --studio-muted: #6B6961;
    --studio-muted-2: #9A988E;

    /* Urun renkleri — her urun kendi DNA'si */
    --studio-product-muh: #2E5BFF;     /* Muhasebecin — elektrik mavi */
    --studio-product-rate: #FF3D8B;    /* RateTheWork — magenta */
    --studio-product-gof: #7B3FF2;     /* Gof Games — mor */
    --studio-product-san: #FF7A1A;     /* Santiye Bul — kehribar */
    --studio-product-ai: #00C28E;      /* Studio AI / yesil */

    /* Aurora gradient (hero + dikkat noktalari) */
    --studio-aurora: linear-gradient(115deg,
        var(--studio-product-muh) 0%,
        var(--studio-product-gof) 45%,
        var(--studio-product-rate) 80%,
        var(--studio-product-san) 100%);

    /* Tipografi aileleri — TECH-559x brand re-skin.
       Display + body share Gemunu Libre so the surface reads as one voice.
       Bricolage stays as the *numeric* face only (stat-pill values, KPI counters
       in MetricBar / ProductCard) where the variable opsz/wdth axes make tabular
       numerals feel intentional. JetBrains Mono is the mono/code/label face. */
    --studio-font-display: 'Gemunu Libre', system-ui, sans-serif;
    --studio-font-body: 'Gemunu Libre', system-ui, sans-serif;
    --studio-font-numeric: 'Bricolage Grotesque', system-ui, sans-serif;
    --studio-font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Display font variation defaults */
    --studio-display-wdth: 100;
    --studio-display-opsz: 96;

    /* Spacing scale */
    --studio-space-1: 4px;
    --studio-space-2: 8px;
    --studio-space-3: 12px;
    --studio-space-4: 16px;
    --studio-space-5: 24px;
    --studio-space-6: 32px;
    --studio-space-7: 48px;
    --studio-space-8: 64px;
    --studio-space-9: 96px;
    --studio-space-10: 128px;

    /* Radius */
    --studio-radius-sm: 8px;
    --studio-radius-md: 14px;
    --studio-radius-lg: 20px;
    --studio-radius-xl: 24px;
    --studio-radius-pill: 100px;

    /* Shadows */
    --studio-shadow-card: 0 24px 60px -28px rgba(11, 11, 15, 0.18);
    --studio-shadow-frame: 0 60px 120px -50px rgba(11, 11, 15, 0.25);
    --studio-shadow-soft: 0 2px 6px rgba(11, 11, 15, 0.04);

    /* Surface bgs — theme-aware via tokens so scoped CSS stays theme-agnostic. */
    --studio-topbar-bg: rgba(244, 241, 234, 0.85);

    /* Z-index scale */
    --studio-z-topbar: 100;
    --studio-z-overlay: 1000;
    --studio-z-modal: 1100;
}

/* ----------------------------------------------------------------------------
 * Tipografi yardimci siniflari
 *
 * Bricolage Grotesque variable font — opsz (12..96), wdth (75..125), wght (200..800)
 * -------------------------------------------------------------------------- */
.studio-display {
    font-family: var(--studio-font-display);
    font-variation-settings: "wdth" 100, "opsz" 96;
    letter-spacing: -0.03em;
    line-height: 0.95;
    font-weight: 500;
}

.studio-display-wide {
    font-family: var(--studio-font-display);
    font-variation-settings: "wdth" 120, "opsz" 96;
    letter-spacing: -0.025em;
    line-height: 0.95;
    font-weight: 500;
}

.studio-display-cond {
    font-family: var(--studio-font-display);
    font-variation-settings: "wdth" 75, "opsz" 96;
    letter-spacing: -0.01em;
    line-height: 0.95;
    font-weight: 500;
}

.studio-display-ital {
    font-style: italic;
    font-weight: 600;
}

.studio-body {
    font-family: var(--studio-font-body);
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.studio-mono {
    font-family: var(--studio-font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
 * Aurora gradient text helper
 * -------------------------------------------------------------------------- */
.studio-grad-text {
    background: var(--studio-aurora);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: studio-grad-shift 8s ease-in-out infinite;
    filter: drop-shadow(0 0 24px rgba(123, 63, 242, 0.35));
}

html[data-theme="neon"] .studio-grad-text {
    filter: drop-shadow(0 0 32px rgba(183, 66, 255, 0.5));
}

/* ----------------------------------------------------------------------------
 * Studio kapsayicisi — sadece yeni sayfalarda aktiflesir
 * MainLayout veya tek tek sayfa kok elemanina .studio-shell eklenirse
 * tum sayfa Studio OS paletine geciser. Eski sayfalar etkilenmez.
 * -------------------------------------------------------------------------- */
.studio-shell {
    background: var(--studio-cream);
    color: var(--studio-ink);
    font-family: var(--studio-font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.studio-shell ::selection {
    background: var(--studio-ink);
    color: var(--studio-cream);
}

/* ----------------------------------------------------------------------------
 * Reduced motion: kullanici hareket azaltma istedi ise animasyonlari durdur
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .studio-grad-text {
        animation: none;
    }
}

/* ============================================================================
 * NEON theme override (TECH-5548 / F11.1)
 *
 * Bu blok, mevcut LUME (krem/ink) tokenlarini neon-cyberpunk dark paletine
 * remap eder. Tum Studio OS sayfalari ayni `--studio-*` token isimlerini
 * okudugu icin tek bir scope-level override ile tema otomatik gecisir.
 *
 * Aktivasyon: <html data-theme="neon"> (App.razor'da varsayilan).
 * Kullanici tercihini App.razor pre-paint script'i localStorage 'tl-theme'
 * key'inden okur. NEON varsayilandir; sadece 'lume' set edildiyse atributu
 * kaldirir ve LUME (yukaridaki :root degerleri) gecerli olur.
 *
 * Issue prompt'unda --void / --bone / --muh / --rate / --gof / --san / --ai
 * token isimleri once cikti, fakat mevcut kod tabani --studio-cream /
 * --studio-ink / --studio-product-* uzerine kurulmus durumda. Override
 * bunlari kaynaktaki isimlere baglar; semantic eslesme:
 *   void   → studio-cream/cream-2/cream-3/cream-soft (surface bg)
 *   bone   → studio-ink/ink-2/ink-3                  (foreground text)
 *   muh    → studio-product-muh                      (neon cyan)
 *   rate   → studio-product-rate                     (hot pink)
 *   gof    → studio-product-gof                      (electric violet)
 *   san    → studio-product-san                      (electric yellow)
 *   ai     → studio-product-ai                       (neon green)
 *   mute   → studio-muted / studio-muted-2
 * ========================================================================== */
html[data-theme="neon"] {
    /* Surface — deep purple void instead of cream.
       cream    = ana zemin, --studio-shell background icin
       cream-2  = skeleton/divider light shade
       cream-3  = skeleton/divider deeper shade
       cream-soft = frame-bar (browser mockup) bg */
    --studio-cream: #0A0212;
    --studio-cream-2: #10031B;
    --studio-cream-3: #17072A;
    --studio-cream-soft: #1F0E38;

    /* Foreground — pale lavender ink instead of warm black.
       ink   = ana metin / kontrast bantlari
       ink-2 = dark-band bg (footer/cookie/dark-strip)
       ink-3 = en kontrastli alt yuzey */
    --studio-ink: #F2E7FF;
    --studio-ink-2: #D6C0F4;
    --studio-ink-3: #B79BE0;

    /* Muted text */
    --studio-muted: #8973A8;
    --studio-muted-2: #6F5B8A;

    /* Lines — koyu zeminde ince acik cizgiler */
    --studio-line: rgba(242, 231, 255, 0.10);
    --studio-line-2: rgba(242, 231, 255, 0.18);
    --studio-line-dark: rgba(242, 231, 255, 0.08);

    /* Brand accents — electrified to read on dark void.
       muh  = elektrik mavi  → neon cyan
       rate = magenta        → hot pink
       gof  = mor            → electric violet
       san  = kehribar       → electric yellow
       ai   = yesil          → neon green (practice highlight) */
    --studio-product-muh: #00D9FF;
    --studio-product-rate: #FF1B6B;
    --studio-product-gof: #B742FF;
    --studio-product-san: #FFD400;
    --studio-product-ai: #39FF88;

    /* Shadow — ince mor halka */
    --studio-shadow-card: 0 24px 60px -28px rgba(183, 66, 255, 0.45);
    --studio-shadow-frame: 0 60px 120px -50px rgba(0, 0, 0, 0.75);
    --studio-shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.45);

    /* Surface bgs — NEON void purple. */
    --studio-topbar-bg: rgba(10, 2, 18, 0.85);
}

/* ----------------------------------------------------------------------------
 * NEON: studio-shell ana zemin
 * studio-shell varsayilan olarak --studio-cream zemin + --studio-ink yazi
 * kullanir; bu zaten token override ile dogru. Ek olarak `body` arka planini
 * da NEON void rengine bagliyoruz ki Studio OS sayfalari MainLayout disinda
 * (StudioLayout) bile homojen render edilsin.
 * -------------------------------------------------------------------------- */
html[data-theme="neon"] body {
    background: var(--studio-cream);
    color: var(--studio-ink);
}

/* ----------------------------------------------------------------------------
 * NEON: Glass / eyebrow / stat-pill / btn-ghost backdrop yuzeyleri.
 * LUME'da bunlar rgba(255,255,255,0.5..0.85) ile yari-saydam beyaz; NEON'da
 * beyaz-on-mor okunmaz olur. NEON'da koyu lavanta tonu + ince mor border.
 * studio-utilities.css'teki hard-coded rgba'lari ezmek icin selector
 * specificity'sini html[data-theme="neon"] ile yukseltiyoruz.
 * -------------------------------------------------------------------------- */
html[data-theme="neon"] .studio-eyebrow {
    background: rgba(242, 231, 255, 0.06);
    border-color: rgba(242, 231, 255, 0.14);
    color: var(--studio-ink-2);
}

html[data-theme="neon"] .studio-stat-pill {
    background: rgba(242, 231, 255, 0.05);
    border-color: rgba(242, 231, 255, 0.12);
}

html[data-theme="neon"] .studio-glass {
    background: rgba(242, 231, 255, 0.05);
    border-color: rgba(242, 231, 255, 0.12);
}

html[data-theme="neon"] .studio-glass-strong {
    background: rgba(15, 5, 27, 0.7);
    border-color: rgba(242, 231, 255, 0.14);
}

html[data-theme="neon"] .studio-btn-ghost {
    background: rgba(242, 231, 255, 0.06);
    border-color: rgba(242, 231, 255, 0.16);
}

html[data-theme="neon"] .studio-btn-ghost:hover {
    background: rgba(242, 231, 255, 0.12);
}

html[data-theme="neon"] .studio-btn-sm {
    background: rgba(242, 231, 255, 0.04);
    border-color: rgba(242, 231, 255, 0.14);
}

/* btn-prim NEON: koyu zemin uzerinde tersine cevirmek yerine neon-cyan/pink
   gradient yapmak yerine token-merkezli: ink (acik lavanta) bg + cream (koyu)
   yazi -> okunabilirligi koru. */
html[data-theme="neon"] .studio-btn-prim:hover {
    box-shadow: 0 12px 30px -15px rgba(0, 217, 255, 0.55);
}

/* ----------------------------------------------------------------------------
 * NEON: TopNav backdrop (TopNav.razor.css'te hard-coded rgba(244,241,234,.85))
 * Scoped CSS oldugu icin attribute selector ile [b-xxx] auto-injected; ama
 * unscoped tag ile de eslesir cunku selektor sinifa baglandi. Specificity
 * yetmezse ::deep gerekirdi — html[data-theme] zinciri sinifa bagli kalir ve
 * scoped attribute hala uygulandigi icin dogru element'i secer.
 * -------------------------------------------------------------------------- */
html[data-theme="neon"] .studio-topbar {
    /* --studio-topbar-bg already remapped via the NEON :root override above;
       this rule survives only to refine the border tone, which lives outside
       the topbar-bg token. */
    border-bottom-color: rgba(242, 231, 255, 0.10);
}

html[data-theme="neon"] .studio-mobile-overlay {
    background: var(--studio-cream);
}

/* ----------------------------------------------------------------------------
 * NEON: studio-pillar (utility) — light surface'lar.
 * LUME: background: #fff -> NEON'da goz alici parlak beyaz, NEON void icine
 * mor-tonlu cam yuzeye cevir. .muh/.rate/.gof/.san/.ai zaten product renkleri
 * uzerinden geliyor; token override ile otomatik neon olur, dokunulmaz.
 * -------------------------------------------------------------------------- */
html[data-theme="neon"] .studio-pillar {
    background: rgba(242, 231, 255, 0.04);
    border-color: rgba(242, 231, 255, 0.10);
}

html[data-theme="neon"] .studio-pillar:not(.muh):not(.rate):not(.gof):not(.san):not(.ai) p {
    color: var(--studio-ink-2);
}

/* ----------------------------------------------------------------------------
 * NEON: studio-frame (browser mockup) — beyaz icerik yuzeyi.
 * LUME'da background:#fff kullaniyor; NEON'da koyu mor.
 * -------------------------------------------------------------------------- */
html[data-theme="neon"] .studio-frame {
    background: var(--studio-cream-soft);
    border-color: rgba(242, 231, 255, 0.12);
}

html[data-theme="neon"] .studio-frame-url {
    background: rgba(242, 231, 255, 0.04);
    border-color: rgba(242, 231, 255, 0.10);
}