/* ============================================================
   Erişilebilirlik paneli ve tercih modları (Pera/Tünel ile aynı yapı)
   Renkler Tailwind @theme token'larından gelir (ink / accent / canvas).
   ============================================================ */

.a11y { position: fixed; right: 24px; bottom: 24px; z-index: 85; font-family: var(--font-sans); }

.a11y-toggle {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: var(--color-ink);
    color: #fff;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 30px rgba(11, 22, 56, 0.22);
    transition: background 0.2s ease;
}

.a11y-toggle:hover { background: var(--color-accent); }
.a11y-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.a11y-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Etiket kapalıyken gizli; üzerine gelince / odakta / panel açıkken açılır. */
.a11y-toggle span {
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease;
}

.a11y-toggle:hover span,
.a11y-toggle:focus-visible span,
.a11y-toggle[aria-expanded="true"] span { max-width: 120px; margin-left: 8px; opacity: 1; }

.a11y-panel {
    position: absolute;
    right: 0;
    bottom: 48px;
    width: 280px;
    max-width: calc(100vw - 32px);
    padding: 16px;
    border-radius: var(--radius-card);
    background: #fff;
    color: var(--color-ink);
    border: 1px solid var(--color-line);
    box-shadow: 0 20px 44px rgba(11, 22, 56, 0.16);
}

.a11y-panel[hidden] { display: none; }

.a11y-head { display: flex; align-items: center; justify-content: space-between; }

.a11y-title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--color-ink); }

.a11y-close { border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--color-ink); opacity: 0.55; }
.a11y-close:hover { opacity: 1; }

.a11y-group { margin-top: 14px; display: grid; gap: 6px; }

.a11y-label {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.a11y-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.a11y-seg button {
    height: 34px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-canvas);
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-ink);
}

.a11y-seg button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }

.a11y-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-canvas);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-ink);
}

.a11y-switch:hover { border-color: var(--color-accent); }

.a11y-knob { position: relative; flex-shrink: 0; width: 32px; height: 18px; border-radius: 999px; background: var(--color-line); transition: background 0.2s ease; }
.a11y-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.a11y-switch[aria-pressed="true"] { border-color: var(--color-accent); }
.a11y-switch[aria-pressed="true"] .a11y-knob { background: var(--color-accent); }
.a11y-switch[aria-pressed="true"] .a11y-knob::after { transform: translateX(14px); }

.a11y-note { margin: 12px 0 0; font-size: 11px; line-height: 15px; color: var(--color-muted); }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-line); }
.a11y-reset { border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023px) {
    .a11y { right: 14px; bottom: 14px; }

    /* 10px yan payla ikon 16px -> 36x36 tam daire. Panel açılınca etiket yine açılır. */
    .a11y-toggle { height: 36px; padding: 0 10px; }
    .a11y-panel { width: min(280px, calc(100vw - 28px)); bottom: 46px; }
}

/* ---------- Tercih modları ---------- */
html.a11y-fs-115 body { zoom: 1.15; }
html.a11y-fs-130 body { zoom: 1.3; }

/* Yüksek kontrast: gri/ikincil metin tonları lacivert mürekkebe çekilir, çizgiler koyulaşır. */
html.a11y-contrast {
    --color-body: var(--color-ink);
    --color-muted: var(--color-ink);
    --color-steel: var(--color-ink);
    --color-charcoal: var(--color-ink);
    --color-line: var(--color-ink);
    --color-accent: #c22a0c;
    --color-accent-dark: #a32308;
}
html.a11y-contrast body { background: #fff; }
html.a11y-contrast [class*="opacity-"] { opacity: 1 !important; }

html.a11y-links a:not(.a11y-toggle) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; }

html.a11y-motion { scroll-behavior: auto !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
}

html.a11y-dyslexia body, html.a11y-dyslexia h1, html.a11y-dyslexia h2, html.a11y-dyslexia h3, html.a11y-dyslexia h4,
html.a11y-dyslexia h5, html.a11y-dyslexia h6,
html.a11y-dyslexia p, html.a11y-dyslexia a, html.a11y-dyslexia span, html.a11y-dyslexia button,
html.a11y-dyslexia input, html.a11y-dyslexia textarea, html.a11y-dyslexia select, html.a11y-dyslexia label, html.a11y-dyslexia li {
    font-family: Verdana, Tahoma, 'Trebuchet MS', sans-serif !important;
    letter-spacing: 0.02em;
    word-spacing: 0.14em;
}

html.a11y-dyslexia p, html.a11y-dyslexia li { line-height: 1.75 !important; }