/* ==========================================================================
   1. GENEL ELEMAN DÜZENLEMELERİ
   ========================================================================== */
svg {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   2. TAILWIND ÖZEL TEMA DEĞİŞKENLERİ VE SINIFLARI
   ========================================================================== */
@layer base {
    :root {
        /* Renk Tanımları */
        --color-surface-container-highest: #e4e2dd;
        --color-surface-container-high: #eae8e3;
        --color-surface-bright: #fbf9f4;
        --color-background: #fbf9f4;
        --color-outline: #737874;
        --color-on-secondary-fixed-variant: #703625;
        --color-surface-variant: #e4e2dd;
        --color-on-secondary: #ffffff;
        --color-on-surface-variant: #424845;
        --color-on-error: #ffffff;
        --color-on-surface: #1b1c19;
        --color-on-tertiary-container: #aab9af;
        --color-inverse-primary: #b6cbc0;
        --color-outline-variant: #c2c8c3;
        --color-on-secondary-container: #7a3e2c;
        --color-primary: #22342c;
        --color-secondary-container: #ffad95;
        --color-inverse-on-surface: #f2f1ec;
        --color-on-primary-fixed: #0d1f18;
        --color-tertiary-fixed-dim: #bbcac0;
        --color-on-secondary-fixed: #380c02;
        --color-on-primary-fixed-variant: #384b42;
        --color-primary-fixed: #d2e8db;
        --color-surface-container-low: #f5f3ee;
        --color-error-container: #ffdad6;
        --color-on-background: #1b1c19;
        --color-surface-container: #f0eee9;
        --color-secondary-fixed: #ffdbd1;
        --color-primary-fixed-dim: #b6cbc0;
        --color-on-tertiary-fixed: #121e18;
        --color-surface-tint: #4f6359;
        --color-primary-container: #384b42;
        --color-tertiary-fixed: #d7e6db;
        --color-secondary: #8d4d3a;
        --color-on-tertiary: #ffffff;
        --color-on-primary: #ffffff;
        --color-secondary-fixed-dim: #ffb59f;
        --color-inverse-surface: #30312e;
        --color-surface: #fbf9f4;
        --color-error: #ba1a1a;
        --color-tertiary-container: #3d4a42;
        --color-on-primary-container: #a5baaf;
        --color-on-tertiary-fixed-variant: #3c4a42;
        --color-surface-dim: #dbdad5;
        --color-surface-container-lowest: #ffffff;
        --color-on-error-container: #93000a;
        --color-tertiary: #27332c;

        /* Font Aileleri */
        --font-manrope: "Manrope", sans-serif;
        --font-newsreader: "Newsreader", serif;
    }
}

/* ==========================================================================
   3. ÖZEL FONT SIZES & HEADLINE / LABEL SINIFLARI
   ========================================================================== */
.text-label-lg {
    font-family: var(--font-manrope);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.text-headline-lg-mobile {
    font-family: var(--font-newsreader);
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -0.01em;
    font-weight: 400;
}

.text-display {
    font-family: var(--font-newsreader);
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -0.02em;
    font-weight: 400;
}

.text-body-sm {
    font-family: var(--font-manrope);
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

.text-headline-md-mobile {
    font-family: var(--font-newsreader);
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
}

.text-headline-sm {
    font-family: var(--font-newsreader);
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
}

.text-body-md {
    font-family: var(--font-manrope);
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
}

.text-body-lg {
    font-family: var(--font-manrope);
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
}

.text-headline-lg {
    font-family: var(--font-newsreader);
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.015em;
    font-weight: 400;
}

.text-label-md {
    font-family: var(--font-manrope);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.text-headline-md {
    font-family: var(--font-newsreader);
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.01em;
    font-weight: 400;
}

.text-display-mobile {
    font-family: var(--font-newsreader);
    font-size: 38px;
    line-height: 46px;
    letter-spacing: -0.01em;
    font-weight: 400;
}

.text-quote {
    font-family: var(--font-newsreader);
    font-size: 22px;
    line-height: 34px;
    letter-spacing: 0;
    font-weight: 400;
}