:root {
    --h1-min-offset: 0.2rem; /* Küçük ekranda biraz küçülsün */
    --h1-max-offset: 0.5rem; /* Büyük ekranda biraz büyüsün */
    --font-min-offset: 0.2rem;
    --font-max-offset: 0.4rem;
    --h4-max-offset: 0.3rem;
    --h5-max-offset: 0.2rem;


    --h2-min-offset: 0.3rem; /* h2 küçük ekranda 0.3rem kadar küçülecek */
    --h2-max-offset: 0.6rem; /* büyük ekranda 0.6rem kadar büyüyecek */

    --font-min-offset: 0.2rem; /* tüm h3–h5 başlıkları küçük ekranda 0.2rem küçülecek */
    --font-max-offset: 0.4rem; /* tüm h3–h5 başlıkları büyük ekranda 0.4rem büyüyecek */


}
body {
    margin: 0;
    font-family: var(--body-font-family);
    color: var(--text-primary-color);
    background-color: var(--background-color);
    font-style: normal;
    font-size: var(--body-font-size);
    font-size: clamp( calc(var(--body-font-size) - 0.2rem), /* min */
    calc(var(--body-font-size) + 0.1vw), /* ideal */
    calc(var(--body-font-size) + 0.3rem) /* max */
    );
}

/* Buton fontları Layout :root tipografi ölçeğini izler; temalarda ayrı font-size gerekmez.
   Bootstrap .btn, --bs-btn-font-size ve padding değişkenlerini kullanır. */
.btn.small {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: var(--small, 0.875rem);
}
.btn.medium {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: var(--p, 1rem);
}
.btn.large {
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-font-size: var(--h6, 1.0625rem);
}
.btn.xlarge {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: calc(var(--h6, 1.0625rem) * 1.04);
}

a.primary,
button.primary {
    background-color: var(--button-primary-color);
    color: var(--button-text-primary-color)
}

    a.primary:hover,
    button.primary:hover {
        background-color: var(--button-primary-color);
        color: var(--button-text-primary-color);
        box-shadow: 0px 3px 9px 0px var(--button-primary-color);
    }

a.secondary,
button.secondary {
    background-color: var(--button-secondary-color);
    color: var(--button-text-secondary-color)
}

    a.secondary:hover,
    button.secondary:hover {
        background-color: var(--button-secondary-color);
        color: var(--button-text-secondary-color);
        box-shadow: 0px 3px 9px 0px var(--button-secondary-color);
    }

a.muted,
button.muted {
    color: var(--text-primary-color);
    background-color: none;
    background: transparent;
    border: 1px solid transparent;
}

a.default,
button.default {
    border: 1px solid rgb(220, 220, 228);
    background: rgb(234, 234, 239);
    color: rgb(102, 102, 135);
}


a.none,
button.none {
    background-color: none;
    color: none;
    border: none
}

a {
    color: var(--text-primary-color);
    color: var(--link-color,#0d6efd);
    text-decoration: none;
}

    a:hover {
        color: var(--link-hover-color);
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }


    a.link {
        color: var(--link-color);
    }

        a.link:hover {
            color: var(--link-hover-color);
            text-decoration: none;
        }
    a.strpi-link:has(i),
    button.strpi-link:has(i) {
        display:flex;
        gap:5px;
        align-items: baseline;
    }
    a.icon-is-right,
    button.icon-is-right {
        flex-direction: row-reverse;
        gap: 5px;
    }

mark, .mark {
    background-color: var(--accent-color);
}



caption {
    color: #6c757d;
    color: var(--text-secondary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary-color);
}



.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
}

.h1, h1 {
    font-size: clamp( calc(var(--h1) - 0.75rem), calc(var(--h1) + 0.5vw), calc(var(--h1) + 1rem) );
}

@media (max-width: 570px) {
    .h1, h1 {
       
    }
}

@media (min-width: 1200px) {
    .h1, h1 {
        
    }
}

.h2, h2 {
    font-size: clamp( calc(var(--h2) - var(--h2-min-offset)), calc(var(--h2) + 0.4vw), calc(var(--h2) + var(--h2-max-offset)) );
}

@media (min-width: 1200px) {
    .h2, h2 {
        font-size: var(--h2)
    }
}

.h3, h3 {
    font-size: clamp( calc(var(--h3) - var(--font-min-offset)), calc(var(--h3) + 0.4vw), calc(var(--h3) + var(--font-max-offset)) );
}

@media (min-width: 1200px) {
    .h3, h3 {
        font-size: var(--h3)
    }
}

.h4, h4 {
    font-size: clamp( calc(var(--h4) - var(--font-min-offset)), calc(var(--h4) + 0.4vw), calc(var(--h4) + var(--font-max-offset)) );
}

@media (min-width: 1200px) {
    .h4, h4 {
        font-size: var(--h4)
    }
}

.h5, h5 {
    font-size: clamp( calc(var(--h5) - var(--font-min-offset)), calc(var(--h5) + 0.3vw), calc(var(--h5) + var(--font-max-offset)) );
}

@media (min-width: 1200px) {
    .h5, h5 {
        font-size: var(--h5);
    }
}

.h6, h6 {
    font-size: clamp( calc(var(--h6) - var(--font-min-offset)), calc(var(--h6) + 0.3vw), calc(var(--h6) + var(--font-max-offset)) );
}


@media (min-width: 1200px) {
    .h6, h6 {
        font-size: var(--h6);
    }
}

.p, p {
    font-size: clamp(1rem, calc(var(--p) + 0.5vw), var(--p));
    font-size: clamp( calc(var(--p) - 0.5vw), calc(var(--p) + 0.2vw), calc(var(--p) + 0.5vw));
}

@media (min-width: 1200px) {
    .p, p {
        font-size: var(--p)
    }
}