:root {
    /* Socify renk paleti */
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-header-bg-start: #0b1a33;
    --color-header-bg-end: #1a2f5c;
    --color-header-border: rgba(255, 255, 255, 0.08);
    --color-text: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.75);
    --color-green: #15803d;
    --color-green-light: #22c55e;
    --color-blue-light: #60a5fa;
    --color-badge: #22c55e;
    --color-icon-pencil: #60a5fa;
    --color-icon-briefcase: #f87171;

    --color-background: #ffffff;
    --color-body-text: #111111;
    --color-border: #e5e5e5;

    /* Tipografi */
    --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;

    /* Boşluklar */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Container */
    --container-max: 100%;
    --container-padding: 1rem;

    /* Header */
    --header-top-height: 40px;
    --header-main-height: 76px;
    --header-stack-height: calc(var(--header-top-height) + var(--header-main-height));
    --hero-inner-min-height: clamp(280px, 42vw + 80px, 320px);
    --hero-inner-overlap: 0.5rem;
    --hero-inner-offset: calc(
        var(--hero-inner-min-height) - var(--header-stack-height) - var(--hero-inner-overlap)
    );

    /* Geçişler */
    --transition: 0.25s ease;

    /* Radius */
    --radius-pill: 999px;
    --radius-md: 10px;
}

@media (min-width: 576px) {
    :root {
        --container-padding: 1.25rem;
        --header-main-height: 80px;
        --hero-inner-overlap: 0.65rem;
    }
}

@media (min-width: 768px) {
    :root {
        --container-padding: 1.5rem;
        --header-main-height: 82px;
        --hero-inner-overlap: 0.75rem;
    }
}

@media (min-width: 992px) {
    :root {
        --container-max: 1090px;
        --container-padding: 2rem;
        --header-main-height: 84px;
        --hero-inner-overlap: 1rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --container-max: 1295px;
        --header-main-height: 86px;
        --hero-inner-overlap: 1.25rem;
    }
}

@media (max-width: 767px) {
    :root {
        --header-top-height: 6.75rem;
        --hero-inner-overlap: 0.35rem;
    }
}

@media (min-width: 1500px) {
    :root {
        --container-max: 1500px;
        --hero-inner-overlap: 1.5rem;
    }
}