/**
 * Erişilebilirlik — site geneli stiller
 * Sınıflar html öğesine uygulanır: html.a11y-dark, html.a11y-high-contrast, ...
 */

/* ── Yazı boyutu (html font-size % ile rem tabanlı ölçekleme) ── */
html.a11y-font-80 { font-size: 80%; }
html.a11y-font-90 { font-size: 90%; }
html.a11y-font-100 { font-size: 100%; }
html.a11y-font-110 { font-size: 110%; }
html.a11y-font-120 { font-size: 120%; }
html.a11y-font-130 { font-size: 130%; }
html.a11y-font-140 { font-size: 140%; }
html.a11y-font-150 { font-size: 150%; }
html.a11y-font-160 { font-size: 160%; }
html.a11y-font-170 { font-size: 170%; }
html.a11y-font-180 { font-size: 180%; }
html.a11y-font-190 { font-size: 190%; }
html.a11y-font-200 { font-size: 200%; }

/* ── Yüksek kontrast ─────────────────────────────────────────── */
html.a11y-high-contrast body {
    background: #000 !important;
    color: #fff !important;
}

html.a11y-high-contrast body :where(
    p, span, li, td, th, label, small, strong, em,
    h1, h2, h3, h4, h5, h6,
    div:not(.accessibility-content):not(.accessibility-modal)
) {
    color: #fff !important;
    background-color: transparent !important;
    border-color: #fff !important;
    box-shadow: none !important;
}

html.a11y-high-contrast body a {
    color: #ffff00 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

html.a11y-high-contrast body a:hover,
html.a11y-high-contrast body a:focus {
    background: #ffff00 !important;
    color: #000 !important;
}

html.a11y-high-contrast body :where(button, .btn, input, select, textarea) {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

html.a11y-high-contrast body :where(button:hover, .btn:hover) {
    background: #fff !important;
    color: #000 !important;
}

html.a11y-high-contrast body img {
    filter: contrast(1.2);
    outline: 2px solid #fff;
}

html.a11y-high-contrast .accessibility-content {
    background: #111 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

html.a11y-high-contrast .accessibility-content * {
    color: #fff !important;
    background-color: transparent !important;
}

/* ── Gece modu ───────────────────────────────────────────────── */
html.a11y-dark body {
    background: #121212 !important;
    color: #e4e4e7 !important;
}

html.a11y-dark body :where(main, footer, .main-container, .container, section, article) {
    background-color: transparent;
    color: inherit;
}

html.a11y-dark body :where(
    .card, .bg-white, .icerik-header, .cb-content-header,
    .news-detail-card, .forms-card, .news-list-card,
    .project-detail-card, .dsl-detail-card, .forms-notice
) {
    background: #1e1e1e !important;
    color: #e4e4e7 !important;
    border-color: #333 !important;
}

html.a11y-dark body :where(h1, h2, h3, h4, h5, h6) {
    color: #f4f4f5 !important;
}

html.a11y-dark body a:not(.btn):not(.accessibility-button) {
    color: #93c5fd !important;
}

html.a11y-dark body .btn-primary,
html.a11y-dark body .home-section__btn {
    background: #32439f !important;
    color: #fff !important;
}

html.a11y-dark .accessibility-content {
    background: #1a1a1a !important;
    color: #e4e4e7 !important;
}

html.a11y-dark .ereglibld-header,
html.a11y-dark .header-ust,
html.a11y-dark .header-alt,
html.a11y-dark .ana-menu-container {
    background: #0f0f0f !important;
}

/* ── Sade mod ────────────────────────────────────────────────── */
html.a11y-simple body * {
    animation: none !important;
    transition: none !important;
}

html.a11y-simple body :where(.card, .section-content, .home-news-card, .news-list-card) {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

html.a11y-simple body img,
html.a11y-simple body video {
    border: 1px solid #ccc !important;
}

/* ── Disleksi dostu font ─────────────────────────────────────── */
html.a11y-dyslexia body,
html.a11y-dyslexia body :where(p, span, li, a, h1, h2, h3, h4, h5, h6, button, label, td, th) {
    font-family: 'Open Dyslexic', 'Comic Sans MS', 'Trebuchet MS', sans-serif !important;
    font-weight: 400 !important;
}

/* ── Metin aralığı ───────────────────────────────────────────── */
html.a11y-text-spacing body :where(p, li, td, th, span, a, label) {
    letter-spacing: 0.08em !important;
    word-spacing: 0.12em !important;
    line-height: 1.85 !important;
}

/* ── Bağlantı vurgusu ──────────────────────────────────────────── */
html.a11y-link-highlight body a:not(.accessibility-button):not(.btn) {
    background-color: rgba(255, 235, 59, 0.35) !important;
    padding: 0.1em 0.25em !important;
    border-radius: 3px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

html.a11y-link-highlight body a:not(.accessibility-button):not(.btn):hover {
    background-color: rgba(255, 235, 59, 0.65) !important;
}

/* ── Animasyonları kapat ─────────────────────────────────────── */
html.a11y-no-animation body *,
html.a11y-no-animation body *::before,
html.a11y-no-animation body *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* ── Büyük imleç ─────────────────────────────────────────────── */
html.a11y-cursor-2 body,
html.a11y-cursor-2 body * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2332439f' opacity='0.85'/%3E%3C/svg%3E") 12 12, auto !important;
}

html.a11y-cursor-3 body,
html.a11y-cursor-3 body * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%2332439f' opacity='0.85'/%3E%3C/svg%3E") 16 16, auto !important;
}

html.a11y-cursor-4 body,
html.a11y-cursor-4 body * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='%2332439f' opacity='0.85'/%3E%3C/svg%3E") 20 20, auto !important;
}

html.a11y-cursor-5 body,
html.a11y-cursor-5 body * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%2332439f' opacity='0.85'/%3E%3C/svg%3E") 24 24, auto !important;
}

/* ── Sesli okuma vurgusu ───────────────────────────────────────── */
html.a11y-reading-hover body.a11y-reading-active {
    cursor: help !important;
}

.a11y-reading-highlight {
    outline: 3px solid #32439f !important;
    outline-offset: 2px !important;
    background: rgba(50, 67, 159, 0.08) !important;
}

/* ── Modal & panel (mevcut stillerin düzeltmeleri) ─────────────── */
.accessibility-button {
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}

.accessibility-button:hover {
    transform: translateY(-50%) rotate(-90deg) scale(1.05);
}

.accessibility-modal .accessibility-options button.active,
.accessibility-modal .accessibility-audio button.active {
    background: var(--primary-color, #32439f) !important;
    color: #fff !important;
    border-color: var(--primary-color, #32439f) !important;
}

.a11y-font-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.35rem 0.65rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: #495057;
    background: #f1f3f5;
    border-radius: 6px;
}

.a11y-read-mode-hint {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    color: #6c757d;
    line-height: 1.45;
}

.accessibility-modal .close-btn {
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}

.accessibility-audio .audio-controls {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.accessibility-audio .audio-controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 992px) {
    .accessibility-button {
        right: -42px;
        font-size: 15px;
        padding: 8px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:not(.a11y-no-animation) {
        scroll-behavior: auto;
    }
}