@font-face {
font-family: 'OpenDyslexic';
src: url('../fonts/OpenDyslexic-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'OpenDyslexic';
src: url('../fonts/OpenDyslexic-Bold.otf') format('opentype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'OpenDyslexic';
src: url('../fonts/OpenDyslexic-Italic.otf') format('opentype');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'OpenDyslexic';
src: url('../fonts/OpenDyslexic-BoldItalic.otf') format('opentype');
font-weight: bold;
font-style: italic;
}
:root {
    --font-original: inherit;
    --font-helvetica: 'Helvetica', 'Arial', sans-serif;
    --font-dyslexic: 'OpenDyslexic', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --acc-letter-step: 0;
    --acc-line-step: 0;
}
.accessibility-panel.acc-modern.is-open {
    transform: translateX(0);
}

body.font-original {
    font-family: var(--font-original) !important;
}

body.font-helvetica {
    font-family: var(--font-helvetica) !important;
}

body.font-dyslexic {
    font-family: var(--font-dyslexic) !important;
}


.acc-modern {
position: fixed;
inset: 0 0 0 auto;
width: 450px;
background: #f8fafc;
border-left: 1px solid #e5eaf1;
display: flex;
flex-direction: column;
z-index: 9999;
font-family: Inter, system-ui, sans-serif;
 transform: translateX(100%);
    transition: transform 0.35s ease;
}

/* HEADER */
.ap-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: #fff;
border-bottom: 1px solid #e5eaf1;
}

.ap-header h3 {
font-size: 16px;
font-weight: 600;
}

.ap-close {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid #e5eaf1;
background: #f1f5f9;
cursor: pointer;
}

.ap-tabs {
display: flex;
background: #fff;
border-bottom: 1px solid #e5eaf1;
}

.ap-tab {
flex: 1;
padding: 12px;
font-size: 14px;
background: none;
border: none;
cursor: pointer;
color: #64748b;
}

.ap-tab.active {
color: #1e40af;
border-bottom: 3px solid #1e40af;
}

/* CONTENT */
.ap-content {
flex: 1;
overflow-y: auto;
padding: 16px;
}

.ap-label {
font-size: 13px;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 12px;
display: block;
}

.ap-card {
background: #fff;
border: 1px solid #e5eaf1;
border-radius: 12px;
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

.ap-stepper {
display: flex;
gap: 8px;
}

.ap-stepper button {
width: 28px;
height: 28px;
border-radius: 6px;
border: 1px solid #dbe2ea;
background: #f8fafc;
}

/* SEGMENT */
.ap-segment {
display: flex;
background: #eef2f7;
border-radius: 8px;
overflow: hidden;
}

.ap-segment button {
padding: 6px 12px;
border: none;
background: transparent;
font-size: 12px;
}

.ap-segment .active {
background: #1e40af;
color: #fff;
}

/* PROFILE */
.ap-profile-card {
width: 100%;
text-align: left;
padding: 14px;
border-radius: 12px;
border: 1px solid #e5eaf1;
background: #fff;
margin-bottom: 12px;
}

.ap-profile-card.active {
background: #1e40af;
color: #fff;
}

/* FOOTER */
.ap-footer {
padding: 16px;
background: #fff;
border-top: 1px solid #e5eaf1;
}

.ap-reset {
width: 100%;
padding: 12px;
border-radius: 10px;
border: none;
background: #1e40af;
color: #fff;
font-weight: 600;
}

/* TAB VISIBILITY */
.ap-tab-content {
display: none;
}

.ap-tab-content.active {
display: block;
}

/* ACCORDION */
.ap-accordion {
border: 1px solid #e5eaf1;
border-radius: 14px;
background: #fff;
margin-bottom: 14px;
/* overflow: hidden; */
}

.ap-accordion-header {
width: 100%;
padding: 14px 16px;
background: none;
border: none;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 14px;
color: #0f172a;
cursor: pointer;
}

.ap-acc-left {
display: flex;
align-items: center;
gap: 10px;
}

.ap-icon {
width: 20px;
height: 20px;
color: #1e40af;
}

.ap-arrow {
width: 10px;
height: 10px;
border-right: 2px solid #64748b;
border-bottom: 2px solid #64748b;
transform: rotate(45deg);
transition: .25s;
}

.ap-accordion.active .ap-arrow {
transform: rotate(-135deg);
}

.ap-accordion-body {
padding: 14px 16px 18px;
display: none;
}

.ap-accordion.active .ap-accordion-body {
display: block;
}

/* SELECT */
.ap-select select {
width: 100%;
height: 44px;
padding: 0 14px;
border-radius: 10px;
border: 1px solid #dbe2ea;
background: #f8fafc;
font-size: 14px;
appearance: none;
}

/* ACCORDION */
.ap-accordion {
background: #fff;
border: 1px solid #e5eaf1;
border-radius: 16px;
margin-bottom: 14px;
}

.ap-accordion-header {
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
background: none;
border: none;
cursor: pointer;
}

.ap-left {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}

.ap-icon {
width: 20px;
height: 20px;
stroke: #1e40af;
fill: none;
stroke-width: 2;
}

.ap-chevron {
width: 10px;
height: 10px;
border-right: 2px solid #64748b;
border-bottom: 2px solid #64748b;
transform: rotate(45deg);
transition: .2s;
}

.ap-accordion.active .ap-chevron {
transform: rotate(-135deg);
}

.ap-accordion-body {
padding: 14px 16px 18px;
display: none;
}

.ap-accordion.active .ap-accordion-body {
display: block;
}

/* SETTINGS */
.ap-setting {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}

/* STEPPER */
.ap-stepper {
display: flex;
align-items: center;
background: #f1f5f9;
border-radius: 999px;
padding: 4px;
gap: 6px;
}

.ap-stepper button {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: #fff;
font-weight: 600;
cursor: pointer;
}

/* SEGMENT */
.ap-segment {
display: flex;
background: #f1f5f9;
border-radius: 999px;
padding: 4px;
}

.ap-segment button {
padding: 6px 14px;
border-radius: 999px;
border: none;
background: transparent;
font-size: 13px;
cursor: pointer;
}

.ap-segment .active {
background: #1e40af;
color: #fff;
}

/* PROFILE */
.ap-profile-item {
width: 100%;
padding: 14px;
border-radius: 12px;
border: 1px solid #e5eaf1;
background: #f8fafc;
margin-bottom: 10px;
text-align: left;
}

.ap-profile-item.active {
background: #1e40af;
color: #fff;
}

/* PROFILE LIST */
.ap-profile-list {
padding: 0;
}

/* ROW */
.ap-profile-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 14px;
border-bottom: 1px solid #e5eaf1;
}

.ap-profile-row:last-child {
border-bottom: none;
}

/* LEFT */
.ap-profile-left {
display: flex;
align-items: center;
gap: 12px;
}

/* ICON */
.ap-profile-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: #eef2ff;
display: flex;
align-items: center;
justify-content: center;
}

.ap-profile-icon svg {
width: 18px;
height: 18px;
stroke: #1e40af;
fill: none;
stroke-width: 2;
}

/* TEXT */
.ap-profile-text {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
}

/* INFO */
.ap-info {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid #cbd5e1;
background: none;
font-size: 11px;
cursor: pointer;
color: #475569;
}

/* SWITCH */
.ap-switch {
position: relative;
width: 42px;
height: 24px;
}

.ap-switch input {
display: none;
}

.ap-switch span {
position: absolute;
inset: 0;
background: #d1d5db;
border-radius: 999px;
transition: .2s;
}

.ap-switch span::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
left: 3px;
top: 3px;
background: #fff;
border-radius: 50%;
transition: .2s;
}

.ap-switch input:checked+span {
background: #1e40af;
}

.ap-switch input:checked+span::before {
transform: translateX(18px);
}

.ap-info {
position: relative;
background: none;
border: none;
cursor: pointer;
font-weight: 600;
width: 22px;
height: 22px;
border-radius: 50%;
background: #e6eef8;
color: #1e3a8a;
font-size: 12px;
}

.ap-info::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
background: #1e293b;
color: #fff;
font-size: 12px;
line-height: 1.4;
padding: 8px 10px;
border-radius: 8px;
white-space: normal;
width: 220px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 9999;
}

.ap-info::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 2px);
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #1e293b;
opacity: 0;
visibility: hidden;
transition: opacity .2s ease;
}

.ap-info:hover::after,
.ap-info:hover::before,
.ap-info:focus::after,
.ap-info:focus::before {
opacity: 1;
visibility: visible;
}

.ap-settings-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}

.ap-setting-card {
background: #f8fafc;
border-radius: 18px;
padding: 16px;
}

.ap-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

.ap-card-left {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}

.ap-aa {
font-size: 18px;
}

.ap-aa span {
font-size: 12px;
opacity: .6;
margin-left: 2px;
}

.ap-stepper.big {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
background: #fff;
border-radius: 999px;
padding: 8px 12px;
}

.ap-stepper.big button {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: #9ca3af;
color: #fff;
font-size: 18px;
}

.ap-slider-dots {
display: flex;
gap: 6px;
margin-top: 8px;
}

.ap-slider-dots span {
width: 20px;
height: 4px;
border-radius: 4px;
background: #d1d5db;
}

.ap-language-group {
display: flex;
flex-direction: column;
gap: 10px;
}

.ap-language-item {
cursor: pointer;
}

.ap-language-item input {
display: none;
}

.ap-lang-ui {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid #e5eaf1;
background: #f8fafc;
transition: all .2s ease;
}

.ap-lang-title {
font-size: 14px;
font-weight: 600;
color: #0f172a;
}

.ap-lang-ui::after {
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #cbd5e1;
background: #fff;
transition: all .2s ease;
}

.ap-language-item input:checked+.ap-lang-ui {
background: #eef2ff;
border-color: #1e40af;
}

.ap-language-item input:checked+.ap-lang-ui::after {
border-color: #1e40af;
background: radial-gradient(circle at center, #1e40af 45%, transparent 46%);
}

body.dyslexic-font {
    font-family: 'OpenDyslexic', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.ap-profile-row {
    cursor: pointer;
}

.ap-info {
    cursor: help;
}

.ap-setting-card.disleksi-card {
    cursor: pointer;
    border: 2px solid transparent;
    transition: .2s ease;
}

.ap-setting-card.disleksi-card.active {
    border-color: #1e40af;
    background: #eef2ff;
}

.ap-setting-card.disleksi-card .ap-slider-dots span {
    background: #d1d5db;
    transition: .2s;
}

.ap-slider-dots span {
    width: 20px;
    height: 4px;
    border-radius: 4px;
    background: #d1d5db;
    transition: .2s;
}

.ap-slider-dots span.active {
    background: #1e40af !important;
}

/* HELVETICA */
body.font-helvetica :not(.accessibility-panel):not(.accessibility-panel *) {
    font-family: 'Helvetica', 'Arial', sans-serif !important;
}

/* DYSLEXIC */
body.font-dyslexic :not(.accessibility-panel):not(.accessibility-panel *) {
    font-family: 'OpenDyslexic',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        Arial,
        sans-serif !important;
}


body *:not(.acc-modern):not(.acc-modern *) {
    letter-spacing: calc(0px + (var(--acc-letter-step) * 0.6px)) !important;
}
body *:not(.acc-modern):not(.acc-modern *) {
    line-height: calc(1.4 + (var(--acc-line-step) * 0.15)) !important;
}

body.cursor-big *:not(.acc-modern):not(.acc-modern *) {
    cursor: url("../images/cursor-big.svg") 16 16, auto;
}

body.cursor-xbig *:not(.acc-modern):not(.acc-modern *) {
    cursor: url("../images/cursor-xbig.svg") 20 20, auto;
} 
.cursor-dots span {
    width: 20px;
    height: 4px;
    border-radius: 4px;
    background: #d1d5db;
    transition: background .2s;
}

.cursor-dots span.active {
    background: #1e40af;
}






body.links-highlight a:not(.ap-reset):not(.ap-info) {
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    /* color: #1e40af !important; */
    font-weight: 600;
}

body.links-highlight a:hover {
    background: rgba(30, 64, 175, 0.12);
    border-radius: 4px;
}

.link-dots span {
    width: 20px;
    height: 4px;
    border-radius: 4px;
    background: #d1d5db;
}

.link-dots span.active {
    background: #1e40af;
}
.ap-setting-card {
    cursor: pointer;
    position: relative;
}

.ap-setting-card .ap-info {
    pointer-events: auto;
}

.ap-slider-dots span {
    display: inline-block;
    width: 20px;
    height: 4px;
    border-radius: 4px;
    background: #d1d5db;
    transition: background .2s ease;
}

.ap-slider-dots span.active {
    background: #1e40af;
}

body.motion-off * {
    animation: none !important;
    transition: none !important;
}

.accessibility-contrast-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    mix-blend-mode: multiply;
    transition: background .25s ease;
}


body.contrast-dark .accessibility-contrast-layer {
    background: rgba(0,0,0,0.35);
}

body.contrast-light .accessibility-contrast-layer {
    background: rgba(255,255,255,0.25);
    mix-blend-mode: screen;
}
body.contrast-high .accessibility-contrast-layer {
    background: rgba(0,0,0,0.55);
}
body.contrast-warm .accessibility-contrast-layer {
    background: rgba(255, 180, 100, 0.25);
    mix-blend-mode: overlay;
}
body.contrast-cool .accessibility-contrast-layer {
    background: rgba(120, 170, 255, 0.25);
    mix-blend-mode: overlay;
}
 
body.cognitive-mode :not(.accessibility-panel):not(.accessibility-panel *) {
    animation: none !important;
    transition: none !important;
}

body.cognitive-mode img:not(.accessibility-panel img),
body.cognitive-mode video:not(.accessibility-panel video),
body.cognitive-mode svg:not(.accessibility-panel svg) {
    filter: grayscale(100%);
}

body.cognitive-mode p:not(.accessibility-panel p),
body.cognitive-mode li:not(.accessibility-panel li) {
    max-width: 70ch;
}
body.cognitive-mode :not(.accessibility-panel):not(.accessibility-panel *) {
    animation: none !important;
    transition: none !important;
}

body.cognitive-mode img:not(.accessibility-panel img),
body.cognitive-mode video:not(.accessibility-panel video),
body.cognitive-mode svg:not(.accessibility-panel svg) {
    filter: grayscale(100%);
}

body.cognitive-mode p:not(.accessibility-panel p),
body.cognitive-mode li:not(.accessibility-panel li) {
    max-width: 70ch;
}
body.color-blind-mode :not(.accessibility-panel):not(.accessibility-panel *) {
    filter: saturate(120%) contrast(110%);
}

body.color-blind-mode a:not(.accessibility-panel a) {
    text-decoration: underline !important;
    font-weight: 600;
}

body.color-blind-mode .badge:not(.accessibility-panel .badge),
body.color-blind-mode .status:not(.accessibility-panel .status),
body.color-blind-mode .etiket:not(.accessibility-panel .etiket) {
    border: 2px solid currentColor;
}

.accessibility-toggle {
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 3px solid #1e3a8a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    color: #1e3a8a;
    transition: all .25s ease;
}

.accessibility-toggle:hover {
    background: #1e3a8a;
    color: #fff;
    transform: translateY(-50%) scale(1.05);
}

.accessibility-toggle svg {
    pointer-events: none;
}

body.color-blind-mode {
    filter: grayscale(100%) contrast(120%);
}

body.color-blind-mode a {
    color: #005fcc !important;
    text-decoration: underline !important;
}

body.color-blind-mode button,
body.color-blind-mode .btn {
    border: 2px solid #000 !important;
}

body.color-blind-mode * {
    background-image: none !important;
}

body.low-vision-mode {
    filter: contrast(140%) brightness(110%);
}

body.low-vision-mode p,
body.low-vision-mode li,
body.low-vision-mode span {
    font-weight: 600;
}

body.low-vision-mode a {
    text-decoration: underline;
    text-underline-offset: 3px;
}