:root {
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-heading: 'Sora', system-ui, -apple-system, sans-serif;
    --color-spring-bg: #F6FBF7;
    --color-spring-mint: #ECFDF5;
    --color-spring-leaf: #15803D;
    --color-spring-dark: #14532D;
    --color-spring-sky: #0284C7;
    --color-spring-amber: #FBBF24;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-spring-bg);
}

h1, h2, h3, .font-heading, .font-display {
    font-family: var(--font-heading);
}

::selection {
    background-color: #D1FAE5;
    color: #065F46;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================
   Global Mobil & Okunabilirlik İyileştirmeleri
   ========================================================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem; /* sabit başlık altına çapa kaydırma */
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Yatay kaydırılabilir mobil şeritler (hızlı gezinme) */
.horizontal-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.horizontal-scroll::-webkit-scrollbar {
    display: none;
}

/* Mobil dokunma geri bildirimini temizle */
button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================
   Gelişmiş & Ergonomik Ses / Ton Range Slider Stilleri
   ========================================================== */
.custom-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 9999px;
    background: #e2e8f0;
    outline: none;
    touch-action: pan-y;
    cursor: grab;
    transition: background 0.2s, box-shadow 0.2s;
}

.custom-range-slider:active {
    cursor: grabbing;
}

.custom-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #7e22ce; /* purple-700 */
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    cursor: grab;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.custom-range-slider:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.2);
    background: #6b21a8;
    box-shadow: 0 0 0 6px rgba(147, 51, 234, 0.25);
}

.custom-range-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #7e22ce;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    cursor: grab;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.custom-range-slider:active::-moz-range-thumb {
    cursor: grabbing;
    transform: scale(1.2);
    background: #6b21a8;
    box-shadow: 0 0 0 6px rgba(147, 51, 234, 0.25);
}

.custom-range-slider-cyan::-webkit-slider-thumb {
    background: #0891b2; /* cyan-600 */
}
.custom-range-slider-cyan:active::-webkit-slider-thumb {
    background: #0e7490;
    box-shadow: 0 0 0 6px rgba(8, 145, 178, 0.25);
}
.custom-range-slider-cyan::-moz-range-thumb {
    background: #0891b2;
}
.custom-range-slider-cyan:active::-moz-range-thumb {
    background: #0e7490;
    box-shadow: 0 0 0 6px rgba(8, 145, 178, 0.25);
}

/* ===========================================================
   MISS ASENA MARKA LOGOSU (AsenaLogo.razor)
   Robot emojisi (🤖) yerine kullanılan gerçek marka görseli.
   Boyut/hizalama bileşen parametresinden (CssClass) verilir.
   =========================================================== */
.asena-logo {
    border-radius: 9999px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    background: #04070B;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.45);
    flex-shrink: 0;
}