/* /Components/Layout/CookieConsent.razor.rz.scp.css */
/* ============================================================================
 * TECH-5600 — Cookie Consent banner (Design System V3 glassmorphism)
 *
 * Fixed bottom banner with frosted glass panel. Uses DS-V3 colour tokens
 * (--panel-rgb, --bone-2, --ai) and global .btn.prim / .btn.ghost classes.
 * ========================================================================== */

.cookie-banner[b-0zzlbbcy01] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 16px;
    animation: cookie-slide-in-b-0zzlbbcy01 0.35s ease-out;
}

@keyframes cookie-slide-in-b-0zzlbbcy01 {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.cookie-banner-inner[b-0zzlbbcy01] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 28px;
    border-radius: 16px;
    background: rgba(var(--panel-rgb, 20, 20, 28), 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.3);
}

.cookie-text[b-0zzlbbcy01] {
    flex: 1;
}

.cookie-text p[b-0zzlbbcy01] {
    color: var(--bone-2);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.cookie-text a[b-0zzlbbcy01] {
    color: var(--ai);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease;
}

.cookie-text a:hover[b-0zzlbbcy01] {
    color: #fff;
}

.cookie-actions[b-0zzlbbcy01] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Remove the arrow pseudo-element from .btn.prim inside cookie banner */
.cookie-actions :deep(.btn.prim)[b-0zzlbbcy01]::after {
    content: none;
}

/* Compact button sizing for cookie banner */
.cookie-actions :deep(.btn)[b-0zzlbbcy01] {
    padding: 11px 22px;
    font-size: 14px;
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 640px) {
    .cookie-banner-inner[b-0zzlbbcy01] {
        flex-direction: column;
        text-align: center;
        padding: 18px 20px;
        gap: 16px;
    }

    .cookie-actions[b-0zzlbbcy01] {
        width: 100%;
    }

    .cookie-actions :deep(.btn)[b-0zzlbbcy01] {
        flex: 1;
        justify-content: center;
    }
}
/* /Components/Pages/BetaProgramPage.razor.rz.scp.css */
/*
    TECH-5597 — BetaProgramPage scoped styles.

    All beta-page visual styling is handled by design-system-v3.css
    (.beta-page, .beta-wrap, .beta-head, .beta-step, .beta-products,
    .bp-card, .beta-counter, .beta-consents, .beta-submit-wrap,
    .modal-shade, .modal-card, etc.).

    This file only carries page-level overrides that cannot go into
    the shared sheet — currently the error toast positioning.
*/

/* ============================ ERROR TOAST ============================ */
.beta-toast[b-ywplan18f1] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    background: var(--void-2, #1a1a1e);
    color: var(--bone, #fff);
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    z-index: 1050;
    max-width: 360px;
    font-size: 14px;
    border: 1px solid rgba(255, 61, 139, 0.4);
}

.beta-toast button[b-ywplan18f1] {
    background: transparent;
    border: 0;
    color: var(--bone, #fff);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* ============================================================================
 * Contact page — Design System V3 (TECH-5596)
 *
 * Layout uses the global design-system-v3.css classes:
 *   .hero, .band.tight, .wide, .contact-grid, .contact-form,
 *   .cf-row, .cf-field, .cf-input, .cf-chip, .cf-check,
 *   .contact-side, .cs-card, .ic-modern, .ic-map, .btn.ai
 *
 * This scoped file is intentionally minimal — all visual styling lives in the
 * shared design system stylesheet. Only page-specific overrides go here.
 * ========================================================================== */
/* /Components/Pages/Faq.razor.rz.scp.css */
/* ============================================================================
 * FAQ page — Studio OS scoped layout (TECH-5492 Faz 1B)
 *
 * Layout:
 *   1. Cream hero — eyebrow + Bricolage 96-120px title + sub + search input
 *   2. Body band — category tab strip + native <details> accordion
 *   3. Dark CTA strip — single button to /iletisim (StaticRouteHelper)
 *
 * Tokens: studio-tokens.css | Utilities: studio-utilities.css
 * Reuses .studio-band(.dark), .studio-wide, .studio-display, .studio-btn-prim
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 1. Hero (cream band, mini aurora)
 * -------------------------------------------------------------------------- */
.studio-faq-hero[b-39hvwrg8yv] {
    padding: 96px 0 64px;
    position: relative;
    overflow: hidden;
}

.studio-faq-hero-inner[b-39hvwrg8yv] {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.studio-faq-h1[b-39hvwrg8yv] {
    font-variation-settings: "wdth" 100, "opsz" 96;
    font-size: clamp(56px, 8.4vw, 120px);
    line-height: 0.92;
    letter-spacing: -0.035em;
    margin: 28px 0 0;
    color: var(--studio-ink);
    font-weight: 500;
}

.studio-faq-h1[b-39hvwrg8yv]  em {
    font-style: italic;
    font-weight: 600;
}

.studio-faq-hero-sub[b-39hvwrg8yv] {
    font-size: 18px;
    line-height: 1.55;
    color: var(--studio-muted);
    max-width: 680px;
    margin: 28px 0 36px;
}

/* Search input (sits inside hero, wide pill on desktop) */
.studio-faq-search[b-39hvwrg8yv] {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--studio-cream-soft);
    border: 1px solid var(--studio-line-2);
    border-radius: 100px;
    box-shadow: var(--studio-shadow-card);
    padding: 6px 16px 6px 50px;
    max-width: 560px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.studio-faq-search:focus-within[b-39hvwrg8yv] {
    border-color: var(--studio-product-muh);
    box-shadow: 0 0 0 4px rgba(46, 91, 255, 0.15), var(--studio-shadow-card);
}

.studio-faq-search-icon[b-39hvwrg8yv] {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--studio-muted);
    display: inline-flex;
    align-items: center;
}

.studio-faq-search-input[b-39hvwrg8yv] {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 12px 0;
    font-family: var(--studio-font-body);
    font-size: 16px;
    line-height: 1.4;
    color: var(--studio-ink);
    outline: none;
    /* Strip the default search clear button — we render our own. */
    -webkit-appearance: none;
    appearance: none;
}

.studio-faq-search-input[b-39hvwrg8yv]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.studio-faq-search-clear[b-39hvwrg8yv] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: var(--studio-cream-2);
    color: var(--studio-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}

.studio-faq-search-clear:hover[b-39hvwrg8yv] {
    background: var(--studio-ink);
    color: var(--studio-cream);
}

/* ----------------------------------------------------------------------------
 * 2. Body band (cream — category tabs + accordion)
 * -------------------------------------------------------------------------- */
.studio-faq-body[b-39hvwrg8yv] {
    padding: 32px 0 96px;
}

/* Category tabs */
.studio-faq-tabs[b-39hvwrg8yv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.studio-faq-tab[b-39hvwrg8yv] {
    padding: 10px 18px;
    border: 1px solid var(--studio-line-2);
    border-radius: 100px;
    background: var(--studio-cream-soft);
    font-family: var(--studio-font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--studio-ink);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.studio-faq-tab:hover[b-39hvwrg8yv] {
    border-color: var(--studio-ink);
}

.studio-faq-tab.active[b-39hvwrg8yv] {
    background: var(--studio-ink);
    border-color: var(--studio-ink);
    color: var(--studio-cream);
}

/* Accordion list */
.studio-faq-accordion[b-39hvwrg8yv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 880px;
}

.studio-faq-empty[b-39hvwrg8yv] {
    color: var(--studio-muted);
    font-size: 16px;
    margin: 24px 0 0;
}

.studio-faq-item[b-39hvwrg8yv] {
    background: var(--studio-cream-soft);
    border: 1px solid var(--studio-line);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.studio-faq-item[open][b-39hvwrg8yv] {
    border-color: var(--studio-product-muh);
    box-shadow: 0 8px 24px -16px rgba(46, 91, 255, 0.35);
}

.studio-faq-summary[b-39hvwrg8yv] {
    cursor: pointer;
    list-style: none;
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    justify-content: space-between;
    user-select: none;
    transition: background .15s ease;
}

.studio-faq-summary:hover[b-39hvwrg8yv] {
    background: var(--studio-cream-soft);
}

/* Hide native disclosure marker (Safari + Firefox) */
.studio-faq-summary[b-39hvwrg8yv]::-webkit-details-marker {
    display: none;
}
.studio-faq-summary[b-39hvwrg8yv]::marker {
    display: none;
}

.studio-faq-q[b-39hvwrg8yv] {
    font-family: var(--studio-font-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--studio-ink);
    flex: 1;
}

.studio-faq-chev[b-39hvwrg8yv] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--studio-cream-2);
    color: var(--studio-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, background .15s ease, color .15s ease;
}

.studio-faq-item[open] .studio-faq-chev[b-39hvwrg8yv] {
    transform: rotate(180deg);
    background: var(--studio-product-muh);
    color: #fff;
}

.studio-faq-answer[b-39hvwrg8yv] {
    padding: 0 24px 24px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--studio-muted);
    white-space: pre-line;
}

/* Skeleton accordion (loading state) */
.studio-skeleton-faq[b-39hvwrg8yv] {
    min-height: 64px;
    border-radius: 16px;
    background: linear-gradient(90deg,
        var(--studio-cream-2) 25%,
        var(--studio-cream-3) 50%,
        var(--studio-cream-2) 75%);
    background-size: 200% 100%;
    animation: studio-faq-skel-b-39hvwrg8yv 1.6s linear infinite;
}

@keyframes studio-faq-skel-b-39hvwrg8yv {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
 * 3. CTA strip (dark band)
 * -------------------------------------------------------------------------- */
.studio-faq-cta[b-39hvwrg8yv] {
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}

.studio-faq-cta-inner[b-39hvwrg8yv] {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.studio-faq-cta-h[b-39hvwrg8yv] {
    font-variation-settings: "wdth" 100, "opsz" 96;
    font-size: clamp(40px, 5.4vw, 80px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--studio-cream);
    font-weight: 500;
    margin: 8px 0 0;
}

.studio-faq-cta-h[b-39hvwrg8yv]  em {
    font-style: italic;
    font-weight: 600;
}

.studio-faq-cta-sub[b-39hvwrg8yv] {
    color: var(--studio-muted-2);
    font-size: 16px;
    line-height: 1.55;
    margin: 12px 0 0;
}

.studio-faq-cta-btn[b-39hvwrg8yv] {
    margin-top: 12px;
}

/* ----------------------------------------------------------------------------
 * Tablet (≤1199)
 * -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .studio-faq-hero[b-39hvwrg8yv] { padding: 80px 0 48px; }
    .studio-faq-cta[b-39hvwrg8yv] { padding: 80px 0; }
}

/* ----------------------------------------------------------------------------
 * Mobile (≤768)
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .studio-faq-hero[b-39hvwrg8yv] { padding: 64px 0 36px; }
    .studio-faq-body[b-39hvwrg8yv] { padding: 24px 0 64px; }
    .studio-faq-cta[b-39hvwrg8yv] { padding: 64px 0; }

    .studio-faq-h1[b-39hvwrg8yv] {
        font-size: clamp(44px, 12vw, 72px);
        margin-top: 22px;
    }

    .studio-faq-hero-sub[b-39hvwrg8yv] {
        font-size: 16px;
        margin: 22px 0 28px;
    }

    .studio-faq-search[b-39hvwrg8yv] {
        max-width: 100%;
        padding: 4px 12px 4px 44px;
    }

    .studio-faq-search-icon[b-39hvwrg8yv] {
        left: 14px;
    }

    .studio-faq-search-input[b-39hvwrg8yv] {
        font-size: 15px;
        padding: 10px 0;
    }

    .studio-faq-summary[b-39hvwrg8yv] {
        padding: 16px 18px;
        gap: 12px;
    }

    .studio-faq-q[b-39hvwrg8yv] {
        font-size: 16px;
    }

    .studio-faq-answer[b-39hvwrg8yv] {
        padding: 0 18px 20px;
        font-size: 14px;
    }
}

/* ----------------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .studio-skeleton-faq[b-39hvwrg8yv],
    .studio-faq-chev[b-39hvwrg8yv],
    .studio-faq-tab[b-39hvwrg8yv],
    .studio-faq-item[b-39hvwrg8yv],
    .studio-faq-summary[b-39hvwrg8yv],
    .studio-faq-search[b-39hvwrg8yv],
    .studio-faq-search-clear[b-39hvwrg8yv] {
        transition: none;
        animation: none;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================================================
 * Home — TECH-5591 scoped overrides
 *
 * All core styling is handled by design-system-v3.css (hero, band, apcard,
 * practices-grid, beta-strip, hud-readout, ring-orbit, etc.) and studio-hud.css.
 * This file only contains minor compositional overrides specific to the
 * Home.razor Blazor integration that cannot live in the global sheet.
 * ========================================================================== */

/* (intentionally minimal — design-system-v3.css is authoritative) */
/* /Components/Pages/Notebook.razor.rz.scp.css */
/* TECH-5595 — Blog listing: all styling via design-system-v3.css.
 * Scoped CSS intentionally empty; kept so Blazor's CSS isolation
 * build target doesn't break if a future tweak needs scoping. */
/* /Components/Pages/NotebookDetail.razor.rz.scp.css */
/* TECH-5595 — Blog detail: all styling via design-system-v3.css.
 * Scoped CSS intentionally empty; kept so Blazor's CSS isolation
 * build target doesn't break if a future tweak needs scoping. */
/* /Components/Pages/PracticeDetail.razor.rz.scp.css */
/* ============================================================================
 * Practice detail — Studio OS scoped layout (TECH-5489)
 *
 * Layout:
 *   1. Dark hero (brand-coloured radial glow)         — eyebrow + h1 + tagline + Quill body
 *   2. Workflow track (5-step methodology, 2026-05-22) — brand-coloured step circles
 *   3. Cream tech-stack chips strip                   — brand-bordered pill list
 *   4. Cream sub-capability list                      — brand-coloured dot bullets, 2-column
 *   5. Dark CTA strip                                 — "Stüdyo ile çalış" + primary contact CTA
 *   6. NotFound shell                                 — inline, no redirect
 *
 * Tokens: studio-tokens.css | Utilities: studio-utilities.css
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 2. Workflow track — 5-step methodology (kullanıcı 2026-05-22 talebi).
 * Desktop: 5-col grid. Tablet: 3-col wrap. Mobile: stacked.
 * -------------------------------------------------------------------------- */
.studio-practice-detail-workflow[b-n8sjtkrjkb] {
    padding: 96px 0;
}

.studio-workflow-track[b-n8sjtkrjkb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    position: relative;
}

.studio-workflow-step[b-n8sjtkrjkb] {
    position: relative;
    background: var(--studio-cream-soft);
    border: 1px solid var(--studio-line);
    border-radius: 18px;
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.studio-workflow-step:hover[b-n8sjtkrjkb] {
    transform: translateY(-2px);
    border-color: var(--card-color, var(--studio-line));
}

.studio-workflow-step-num[b-n8sjtkrjkb] {
    font-family: var(--studio-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--card-color, var(--studio-ink));
    background: color-mix(in srgb, var(--card-color, #1A1A1F) 12%, transparent);
    padding: 4px 10px;
    border-radius: 999px;
    align-self: flex-start;
}

.studio-workflow-step-icon[b-n8sjtkrjkb] {
    font-size: 22px;
    color: var(--card-color, var(--studio-ink));
}

.studio-workflow-step-title[b-n8sjtkrjkb] {
    font-family: var(--studio-font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--studio-ink);
}

.studio-workflow-step-desc[b-n8sjtkrjkb] {
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
    color: var(--studio-muted);
}

@media (max-width: 1024px) {
    .studio-workflow-track[b-n8sjtkrjkb] {
        grid-template-columns: repeat(3, 1fr);
    }
    .studio-practice-detail-workflow[b-n8sjtkrjkb] { padding: 72px 0; }
}

@media (max-width: 640px) {
    .studio-workflow-track[b-n8sjtkrjkb] {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------------
 * 1. Hero (brand-coloured glow on dark band)
 * -------------------------------------------------------------------------- */
.studio-practice-detail-hero[b-n8sjtkrjkb] {
    padding: 96px 0 88px;
    position: relative;
    overflow: hidden;
}

/* Brand colour radial glow — mirrors the PracticeCard glow but scaled for
   a full-bleed hero. Pointer-events: none so the chip + CTA layer stay clickable. */
.studio-practice-detail-hero-glow[b-n8sjtkrjkb] {
    position: absolute;
    top: -200px;
    right: -200px;
    width: 720px;
    height: 720px;
    background: radial-gradient(circle, var(--card-color, var(--studio-ink)), transparent 65%);
    opacity: 0.35;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.studio-practice-detail-hero-inner[b-n8sjtkrjkb] {
    position: relative;
    z-index: 1;
    max-width: 980px;
}

.studio-practice-detail-h1[b-n8sjtkrjkb] {
    font-variation-settings: "wdth" 100, "opsz" 96;
    font-size: clamp(48px, 7.2vw, 104px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 26px 0 0;
    color: var(--studio-cream);
    font-weight: 500;
}

.studio-practice-detail-tagline[b-n8sjtkrjkb] {
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.5;
    color: var(--studio-cream);
    opacity: 0.92;
    margin: 24px 0 0;
    max-width: 760px;
}

.studio-practice-detail-content[b-n8sjtkrjkb] {
    margin: 32px 0 0;
    color: var(--studio-muted-2);
    font-size: 16px;
    line-height: 1.65;
    max-width: 760px;
}

.studio-practice-detail-content[b-n8sjtkrjkb]  p {
    margin: 0 0 14px;
}

.studio-practice-detail-content[b-n8sjtkrjkb]  a {
    color: var(--studio-cream);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.studio-practice-detail-content[b-n8sjtkrjkb]  b,
.studio-practice-detail-content[b-n8sjtkrjkb]  strong {
    color: var(--studio-cream);
}

/* Skeleton — used while OnParametersSetAsync awaits the API. Matches hero
   min-height so the scroll position doesn't jump on data arrival. */
.studio-skeleton-practice-hero[b-n8sjtkrjkb] {
    min-height: 320px;
    border-radius: 24px;
    background: linear-gradient(90deg,
        var(--studio-ink-2) 25%,
        var(--studio-ink-3) 50%,
        var(--studio-ink-2) 75%);
    background-size: 200% 100%;
    animation: studio-practice-detail-skel-b-n8sjtkrjkb 1.6s linear infinite;
}

@keyframes studio-practice-detail-skel-b-n8sjtkrjkb {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
 * 2. Tech stack chips
 * -------------------------------------------------------------------------- */
.studio-practice-detail-tech[b-n8sjtkrjkb] {
    padding: 72px 0 0;
}

.studio-practice-detail-tech-chips[b-n8sjtkrjkb] {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.studio-practice-detail-tech-chips li[b-n8sjtkrjkb] {
    font-family: var(--studio-font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 14px;
    border: 1px solid var(--card-color, var(--studio-line));
    border-radius: 100px;
    color: var(--studio-ink);
    background: var(--studio-cream-soft);
}

/* ----------------------------------------------------------------------------
 * 3. Sub-capability highlight list (brand-coloured dots, two-column on desktop)
 * -------------------------------------------------------------------------- */
.studio-practice-detail-highlights[b-n8sjtkrjkb] {
    padding: 72px 0 96px;
}

.studio-practice-detail-highlights-list[b-n8sjtkrjkb] {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 32px;
}

.studio-practice-detail-highlights-list li[b-n8sjtkrjkb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--studio-line);
    color: var(--studio-ink);
    font-size: 16px;
    line-height: 1.45;
}

.studio-practice-detail-highlights-dot[b-n8sjtkrjkb] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 7px;
    background: var(--card-color, var(--studio-ink));
}

.studio-practice-detail-highlights-text[b-n8sjtkrjkb] {
    flex: 1 1 auto;
}

/* ----------------------------------------------------------------------------
 * 4. CTA strip (dark, full-bleed)
 * -------------------------------------------------------------------------- */
.studio-practice-detail-cta[b-n8sjtkrjkb] {
    padding: 96px 0;
}

.studio-practice-detail-cta-inner[b-n8sjtkrjkb] {
    max-width: 880px;
    text-align: center;
    margin: 0 auto;
}

.studio-practice-detail-cta-actions[b-n8sjtkrjkb] {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.studio-practice-detail-back[b-n8sjtkrjkb] {
    color: var(--studio-cream);
    border-color: rgba(255, 255, 255, 0.32);
}

.studio-practice-detail-back:hover[b-n8sjtkrjkb],
.studio-practice-detail-back:focus-visible[b-n8sjtkrjkb] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--studio-cream);
}

/* ----------------------------------------------------------------------------
 * 5. NotFound shell — inline, no redirect (matches Product detail pattern)
 * -------------------------------------------------------------------------- */
.studio-practice-detail-notfound[b-n8sjtkrjkb] {
    padding: 120px 0;
    text-align: center;
}

.studio-practice-detail-notfound .studio-sec-h[b-n8sjtkrjkb] {
    margin-bottom: 16px;
}

.studio-practice-detail-notfound .studio-sec-sub[b-n8sjtkrjkb] {
    max-width: 560px;
    margin: 0 auto 28px;
}

/* ----------------------------------------------------------------------------
 * Tablet (≤1199)
 * -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .studio-practice-detail-hero[b-n8sjtkrjkb] { padding: 80px 0 72px; }

    .studio-practice-detail-highlights-list[b-n8sjtkrjkb] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .studio-practice-detail-cta[b-n8sjtkrjkb] { padding: 80px 0; }
}

/* ----------------------------------------------------------------------------
 * Mobile (≤768)
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .studio-practice-detail-hero[b-n8sjtkrjkb] { padding: 64px 0 56px; }

    .studio-practice-detail-hero-glow[b-n8sjtkrjkb] {
        top: -150px;
        right: -200px;
        width: 480px;
        height: 480px;
    }

    .studio-practice-detail-h1[b-n8sjtkrjkb] {
        font-size: clamp(40px, 11vw, 64px);
        margin-top: 20px;
    }

    .studio-practice-detail-tagline[b-n8sjtkrjkb] {
        font-size: 16px;
        margin-top: 18px;
    }

    .studio-practice-detail-content[b-n8sjtkrjkb] {
        margin-top: 24px;
        font-size: 15px;
    }

    .studio-practice-detail-tech[b-n8sjtkrjkb],
    .studio-practice-detail-highlights[b-n8sjtkrjkb] {
        padding: 56px 0;
    }

    .studio-practice-detail-tech-chips li[b-n8sjtkrjkb] {
        font-size: 11px;
        padding: 7px 12px;
    }

    .studio-practice-detail-cta[b-n8sjtkrjkb] {
        padding: 64px 0;
    }

    .studio-practice-detail-notfound[b-n8sjtkrjkb] {
        padding: 80px 0;
    }
}

/* ----------------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .studio-skeleton-practice-hero[b-n8sjtkrjkb] {
        animation: none;
    }
}
/* /Components/Pages/Practices.razor.rz.scp.css */
/* ============================================================================
 * Practices listing — TECH-5593
 *
 * All visual styles live in design-system-v3.css (hero, band, practice,
 * svc-cat, stepper, timeline). This scoped file is intentionally empty;
 * kept as a placeholder so the asset pipeline doesn't break if a future
 * issue needs page-specific overrides.
 * ========================================================================== */
/* /Components/Pages/ProductDetail.razor.rz.scp.css */
/* ============================================================================
 * ProductDetail — Studio OS scoped layout (TECH-5487)
 *
 * Hero: brand-color zemin (--card-color), buyuk display tipografi.
 * Status grid: 1.2fr / 1fr (sol status+stats, sag roadmap).
 * CTA strip: dark band uzerine cream cizgili big-type cagri.
 *
 * Tokens: studio-tokens.css | Utilities: studio-utilities.css
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * Hero
 * -------------------------------------------------------------------------- */
.studio-prod-detail-hero[b-exgrcce92a] {
    background: var(--card-color, var(--studio-ink));
    color: #fff;
    padding: 96px 0 72px;
    position: relative;
    overflow: hidden;
}

.studio-prod-detail-hero h1[b-exgrcce92a] {
    font-family: var(--studio-font-display);
    font-weight: 500;
    font-size: clamp(48px, 8vw, 112px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 28px 0 0;
    color: #fff;
}

.studio-prod-detail-tagline[b-exgrcce92a] {
    font-size: 22px;
    line-height: 1.4;
    margin-top: 18px;
    opacity: 0.95;
    max-width: 720px;
}

.studio-prod-detail-summary[b-exgrcce92a] {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 20px;
    opacity: 0.85;
    max-width: 620px;
}

.studio-prod-detail-summary[b-exgrcce92a]  p {
    margin: 0 0 12px;
}

.studio-prod-detail-hero-cta[b-exgrcce92a] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.studio-prod-detail-version[b-exgrcce92a] {
    font-family: var(--studio-font-mono, ui-monospace, monospace);
    font-size: 11px;
    opacity: 0.85;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
 * Status + roadmap grid
 * -------------------------------------------------------------------------- */
.studio-prod-detail-status-grid[b-exgrcce92a] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
}

.studio-prod-detail-status-card[b-exgrcce92a],
.studio-prod-detail-roadmap-card[b-exgrcce92a] {
    background: var(--studio-cream-soft);
    border: 1px solid var(--studio-line);
    border-radius: var(--studio-radius-lg, 24px);
    padding: 32px;
}

.studio-prod-detail-status-head[b-exgrcce92a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
}

.studio-prod-detail-status-head h2[b-exgrcce92a],
.studio-prod-detail-roadmap-card h2[b-exgrcce92a] {
    font-family: var(--studio-font-display);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -0.02em;
    margin: 0 0 0;
    color: var(--studio-ink);
}

.studio-prod-detail-roadmap-card h2[b-exgrcce92a] {
    margin-bottom: 20px;
}

.studio-prod-detail-stats[b-exgrcce92a] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.studio-prod-detail-stat-row[b-exgrcce92a] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--studio-line);
}

.studio-prod-detail-stat-row:first-child[b-exgrcce92a] {
    border-top: none;
    padding-top: 0;
}

.studio-prod-detail-stat-row .l[b-exgrcce92a] {
    font-family: var(--studio-font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--studio-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.studio-prod-detail-stat-row .v[b-exgrcce92a] {
    font-family: var(--studio-font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--studio-ink);
}

/* ----------------------------------------------------------------------------
 * CTA strip (dark band)
 * -------------------------------------------------------------------------- */
.studio-prod-detail-cta-strip[b-exgrcce92a] {
    text-align: center;
    padding: 32px 0;
}

.studio-prod-detail-cta-strip h2[b-exgrcce92a] {
    font-family: var(--studio-font-display);
    font-weight: 500;
    font-size: clamp(40px, 6vw, 80px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: var(--studio-cream);
}

.studio-prod-detail-cta-strip[b-exgrcce92a]  em {
    font-style: italic;
    font-weight: 600;
}

.studio-prod-detail-cta-strip p[b-exgrcce92a] {
    font-size: 17px;
    color: var(--studio-muted-2);
    margin: 0 auto 32px;
    max-width: 540px;
}

/* ----------------------------------------------------------------------------
 * NotFound state (inline; not a 404 redirect)
 * -------------------------------------------------------------------------- */
.studio-prod-detail-notfound[b-exgrcce92a] {
    text-align: center;
    padding: 40px 0 24px;
}

.studio-prod-detail-notfound .studio-sec-sub[b-exgrcce92a] {
    margin: 16px auto 28px;
    max-width: 540px;
}

/* ----------------------------------------------------------------------------
 * Skeleton placeholder
 * -------------------------------------------------------------------------- */
.studio-skeleton-detail-hero[b-exgrcce92a] {
    height: 360px;
    border-radius: var(--studio-radius-lg, 24px);
    background: linear-gradient(90deg,
        var(--studio-cream-2) 25%,
        var(--studio-cream-3) 50%,
        var(--studio-cream-2) 75%);
    background-size: 200% 100%;
    animation: studio-detail-skel-b-exgrcce92a 1.6s linear infinite;
}

@keyframes studio-detail-skel-b-exgrcce92a {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
 * Tablet (≤1024)
 * -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .studio-prod-detail-status-grid[b-exgrcce92a] {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------------
 * Mobile (≤768)
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .studio-prod-detail-hero[b-exgrcce92a] {
        padding: 64px 0 48px;
    }

    .studio-prod-detail-tagline[b-exgrcce92a] {
        font-size: 18px;
    }

    .studio-prod-detail-status-card[b-exgrcce92a],
    .studio-prod-detail-roadmap-card[b-exgrcce92a] {
        padding: 24px;
    }

    .studio-prod-detail-status-head h2[b-exgrcce92a],
    .studio-prod-detail-roadmap-card h2[b-exgrcce92a] {
        font-size: 22px;
    }

    .studio-prod-detail-stat-row .v[b-exgrcce92a] {
        font-size: 18px;
    }

    .studio-skeleton-detail-hero[b-exgrcce92a] {
        height: 280px;
    }
}

/* ----------------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .studio-skeleton-detail-hero[b-exgrcce92a] {
        animation: none;
    }
}
/* /Components/Pages/Products.razor.rz.scp.css */
/* ============================================================================
 * Products page — scoped CSS overrides (TECH-5592)
 *
 * All primary styling comes from design-system-v3.css (.hero, .band, .apcard,
 * .faq-list, .faq-item, etc.). This file only holds page-specific overrides
 * that don't belong in the shared design system.
 * ========================================================================== */

/* Products grid: on the dedicated listing page the summary text is longer
   than on the Home preview, so give the cards a bit more breathing room. */
[b-4ey2zr9k2r] .products-grid.apple .ap-tag {
    -webkit-line-clamp: 4;
}
/* /Components/Pages/Studio.razor.rz.scp.css */
/* ============================================================================
 * Studio page (About) — TECH-5594
 *
 * All visual styles live in design-system-v3.css (.hero, .band, .principles-grid,
 * .vtimeline, .eyebrow, .stat-cell, etc.). This scoped file is intentionally
 * minimal — only page-specific spacing overrides that should not leak to other
 * pages using the same design-system classes.
 * ========================================================================== */

/* No page-specific overrides needed at this time.
   Keeping the file so Blazor does not emit an orphan CSS scope attribute
   if we add scoped rules later. */
/* /Components/Shared/StudioComponents/MetricBar.razor.rz.scp.css */
/* Metric bar scoped CSS. Tasarim sistemi: .bar + .bar i. */

.studio-metric-bar[b-w34awv27uq] {
    width: 100%;
}

.studio-metric-track[b-w34awv27uq] {
    height: 6px;
    background: rgba(11, 11, 15, 0.08);
    border-radius: 100px;
    overflow: hidden;
}

.studio-metric-bar.dark .studio-metric-track[b-w34awv27uq] {
    background: rgba(255, 255, 255, 0.08);
}

.studio-metric-track > i[b-w34awv27uq] {
    display: block;
    height: 100%;
    border-radius: 100px;
    transition: width 0.4s ease;
}

.studio-metric-foot[b-w34awv27uq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-family: var(--studio-font-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--studio-muted);
}

.studio-metric-bar.dark .studio-metric-foot[b-w34awv27uq] {
    color: var(--studio-muted-2);
}

@media (prefers-reduced-motion: reduce) {
    .studio-metric-track > i[b-w34awv27uq] {
        transition: none;
    }
}
/* /Components/Shared/StudioComponents/RoadmapTrack.razor.rz.scp.css */
/* Roadmap track scoped CSS.
   Tasarim sistemi: .prod-roadmap / .rm-step. AI yesili = --studio-product-ai. */

.studio-roadmap[b-h46wun7agk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 24px;
}

.studio-roadmap.compact[b-h46wun7agk] {
    margin-top: 16px;
}

.studio-roadmap-step[b-h46wun7agk] {
    padding: 14px 0;
    border-top: 1px solid var(--studio-line);
    position: relative;
}

.studio-roadmap.compact .studio-roadmap-step[b-h46wun7agk] {
    padding: 10px 0;
}

.studio-roadmap.dark .studio-roadmap-step[b-h46wun7agk] {
    border-top-color: var(--studio-line-dark);
}

.studio-roadmap-step .when[b-h46wun7agk] {
    font-family: var(--studio-font-mono);
    font-size: 10px;
    color: var(--studio-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.studio-roadmap.dark .studio-roadmap-step .when[b-h46wun7agk] {
    color: var(--studio-muted-2);
}

.studio-roadmap-step .what[b-h46wun7agk] {
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
    color: inherit;
}

.studio-roadmap.compact .studio-roadmap-step .what[b-h46wun7agk] {
    font-size: 12px;
    margin-top: 4px;
}

.studio-roadmap-step.done .when[b-h46wun7agk] {
    color: var(--studio-product-ai);
}

.studio-roadmap-step.done[b-h46wun7agk]::before {
    content: "●";
    font-size: 14px;
    color: var(--studio-product-ai);
    position: absolute;
    top: 14px;
    right: 0;
    line-height: 1;
}

.studio-roadmap.compact .studio-roadmap-step.done[b-h46wun7agk]::before {
    top: 10px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .studio-roadmap[b-h46wun7agk] {
        grid-template-columns: repeat(2, 1fr);
    }
}