/* ============================================================
   YZ Restaurant Accessibility Module — A.2 Reading Mode + Settings
============================================================ */

/* Atkinson Hyperlegible font (en üstte olmalı) */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

/* ─── Speed-Dial Buton (♿) ─── */
.a11y-speed-dial-item .speed-dial-btn.a11y-toggle-btn {
    background: linear-gradient(135deg, #2d8a3e 0%, #4caf50 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.18);
    font-size: 22px;
}
.a11y-speed-dial-item .speed-dial-btn.a11y-toggle-btn:hover {
    background: linear-gradient(135deg, #266f33 0%, #43a047 100%);
    transform: scale(1.05);
}
.a11y-speed-dial-item .speed-dial-btn.a11y-toggle-btn:focus-visible {
    outline: 3px solid #ffd700;
    outline-offset: 3px;
}

/* ─── Modal Container + Backdrop ─── */
.a11y-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    pointer-events: none;
}
.a11y-modal.is-open { display: block; pointer-events: auto; }
.a11y-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 10, 5, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: a11yBackdropIn 220ms ease;
}
@keyframes a11yBackdropIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── Panel ─── */
.a11y-modal-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 540px);
    max-height: min(85vh, 720px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: a11yPanelIn 280ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes a11yPanelIn {
    from { opacity: 0; transform: translate(-50%, -45%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ─── Modal Header ─── */
.a11y-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(180deg, #f8f6f2 0%, #ffffff 100%);
    flex-shrink: 0;
}
.a11y-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1410;
    line-height: 1.3;
}
.a11y-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #1a1410;
    cursor: pointer;
    transition: background 160ms ease;
}
.a11y-modal-close:hover { background: rgba(0, 0, 0, 0.06); }
.a11y-modal-close:focus-visible { outline: 2px solid #4caf50; outline-offset: 2px; }

/* ─── Modal Body (scrollable) ─── */
.a11y-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    color: #2a2520;
    font-size: 15px;
    line-height: 1.6;
}
.a11y-modal-body::-webkit-scrollbar { width: 8px; }
.a11y-modal-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }

/* ─── Reading Mode Master Button ─── */
.a11y-reading-mode-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    background: linear-gradient(135deg, #2d8a3e 0%, #4caf50 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: start;
    transition: transform 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25);
}
.a11y-reading-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.35);
}
.a11y-reading-mode-btn:focus-visible { outline: 3px solid #ffd700; outline-offset: 3px; }
.a11y-reading-mode-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, #1b5e20 0%, #388e3c 100%);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.4), inset 0 0 0 2px #ffd700;
}
.a11y-reading-mode-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 20px;
}
.a11y-reading-mode-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.a11y-reading-mode-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.a11y-reading-mode-desc { font-size: 13px; opacity: 0.9; line-height: 1.4; }
.a11y-reading-mode-toggle {
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.25);
    position: relative;
    transition: background 200ms ease;
}
.a11y-reading-mode-toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 200ms ease;
}
.a11y-reading-mode-btn[aria-pressed="true"] .a11y-reading-mode-toggle { background: #ffd700; }
.a11y-reading-mode-btn[aria-pressed="true"] .a11y-reading-mode-toggle::after { transform: translateX(20px); }

/* ─── Sections + Settings ─── */
.a11y-section { margin-top: 22px; }
.a11y-section-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c5f53;
}
.a11y-setting {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.a11y-setting-toggle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.a11y-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #2a2520;
    margin: 0;
}
.a11y-label i { color: #6c5f53; width: 18px; text-align: center; }

/* Segmented buton grubu */
.a11y-segmented {
    display: flex;
    gap: 4px;
    background: #f4f1ec;
    padding: 4px;
    border-radius: 10px;
}
.a11y-seg-btn {
    flex: 1;
    padding: 8px 6px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #2a2520;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease;
    min-height: 36px;
}
.a11y-seg-btn:hover { background: rgba(0, 0, 0, 0.04); }
.a11y-seg-btn:focus-visible { outline: 2px solid #4caf50; outline-offset: 1px; }
.a11y-seg-btn[aria-pressed="true"] {
    background: #ffffff;
    color: #1a1410;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Toggle switch */
.a11y-toggle {
    flex-shrink: 0;
    position: relative;
    width: 48px;
    height: 28px;
    border-radius: 14px;
    background: #d4cfc7;
    border: none;
    cursor: pointer;
    transition: background 200ms ease;
    padding: 0;
}
.a11y-toggle:focus-visible { outline: 2px solid #4caf50; outline-offset: 2px; }
.a11y-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 200ms ease;
}
.a11y-toggle[aria-checked="true"] { background: #4caf50; }
.a11y-toggle[aria-checked="true"] .a11y-toggle-thumb { transform: translateX(20px); }

/* Reset button */
.a11y-reset-wrap {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}
.a11y-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    color: #c0392b;
    border: 1.5px solid #c0392b;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 160ms ease;
}
.a11y-reset-btn:hover { background: #c0392b; color: #ffffff; }
.a11y-reset-btn:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }

/* RTL */
[dir="rtl"] .a11y-modal-header { flex-direction: row-reverse; }
[dir="rtl"] .a11y-toggle[aria-checked="true"] .a11y-toggle-thumb { transform: translateX(-20px); }
[dir="rtl"] .a11y-reading-mode-btn[aria-pressed="true"] .a11y-reading-mode-toggle::after { transform: translateX(-20px); }

/* Body scroll-lock */
body.a11y-modal-open { overflow: hidden; }

/* Mobil bottom-sheet */
@media (max-width: 480px) {
    .a11y-modal-panel {
        width: 100vw;
        max-height: 90vh;
        top: auto;
        bottom: 0;
        left: 0;
        transform: translate(0, 0);
        border-radius: 16px 16px 0 0;
        animation: a11yPanelInMobile 320ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
    @keyframes a11yPanelInMobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* ============================================================
   ★ READING MODE — UYGULAMA ★
   data-a11y-reading="1" tüm html'e eklenir → tema CSS'leri ezilir
============================================================ */
html[data-a11y-reading="1"] {
    zoom: 1.15;
}
@supports not (zoom: 1) {
    html[data-a11y-reading="1"] body { font-size: 115% !important; }
}
html[data-a11y-reading="1"] body {
    font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif !important;
    letter-spacing: 0.04em !important;
    line-height: 1.7 !important;
}
html[data-a11y-reading="1"] body p,
html[data-a11y-reading="1"] body li {
    text-align: start !important;
    max-width: 65ch;
}
html[data-a11y-reading="1"] body a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
html[data-a11y-reading="1"] *,
html[data-a11y-reading="1"] *::before,
html[data-a11y-reading="1"] *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
}

/* GRANULAR — Yazı Boyutu (zoom kullanılıyor — tüm sabit px'leri etkiler) */
html[data-a11y-font="medium"]  { zoom: 1.10; }
html[data-a11y-font="large"]   { zoom: 1.25; }
html[data-a11y-font="xlarge"]  { zoom: 1.45; }
/* Firefox eski versiyonlar için fallback */
@supports not (zoom: 1) {
    html[data-a11y-font="medium"]  body { font-size: 110% !important; }
    html[data-a11y-font="large"]   body { font-size: 125% !important; }
    html[data-a11y-font="xlarge"]  body { font-size: 145% !important; }
}

/* ============================================================
   GRANULAR — Kontrast (yeniden yazıldı — güvenli versiyon)
   Strateji: body'ye renk uygula, child'lara transparent + inherit
============================================================ */

/* ---- HIGH: siyah/beyaz/sarı (Windows High Contrast tarzı) ---- */
html[data-a11y-contrast="high"] body {
    background-color: #000000 !important;
    color: #ffffff !important;
}
html[data-a11y-contrast="high"] body :where(div, section, header, footer, main, article, aside, nav, ul, ol, table, tbody, thead, tr, form) {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
html[data-a11y-contrast="high"] body :where(p, span, h1, h2, h3, h4, h5, h6, li, td, th, label, small, strong, em, b, i) {
    background-color: transparent !important;
    color: #ffffff !important;
}
html[data-a11y-contrast="high"] body :where(a, a *) {
    color: #ffeb3b !important;
}
html[data-a11y-contrast="high"] body :where(button, input, select, textarea) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}
html[data-a11y-contrast="high"] body :where(img, svg, video, picture, canvas) {
    background-color: transparent !important;
    filter: contrast(1.15) brightness(1.05);
}

/* ---- MAX: pure beyaz/siyah (en yüksek kontrast) ---- */
html[data-a11y-contrast="max"] body {
    background-color: #ffffff !important;
    color: #000000 !important;
}
html[data-a11y-contrast="max"] body :where(div, section, header, footer, main, article, aside, nav, ul, ol, table, tbody, thead, tr, form) {
    background-color: transparent !important;
    color: #000000 !important;
    border-color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html[data-a11y-contrast="max"] body :where(p, span, h1, h2, h3, h4, h5, h6, li, td, th, label, small, strong, em, b, i) {
    background-color: transparent !important;
    color: #000000 !important;
}
html[data-a11y-contrast="max"] body :where(a, a *) {
    color: #0000ee !important;
    text-decoration: underline !important;
}
html[data-a11y-contrast="max"] body :where(button, input, select, textarea) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}
html[data-a11y-contrast="max"] body :where(img, svg, video, picture, canvas) {
    background-color: transparent !important;
    filter: grayscale(0.3) contrast(1.2);
}

/* ---- NEGATIVE: invert tüm sayfa (gece-modu efekti) ---- */
html[data-a11y-contrast="negative"] body {
    filter: invert(1) hue-rotate(180deg) !important;
    background: #ffffff !important;
}
/* Resim ve videoları geri çevir (tekrar invert) */
html[data-a11y-contrast="negative"] body :where(img, video, iframe, picture, canvas) {
    filter: invert(1) hue-rotate(180deg);
}

/* ---- MODAL muaf (her durumda kendi tasarımını korumalı) ----
   Önemli: a11y kontrast modları aktifken bile modal kendi
   beyaz/koyu tasarımını korumalı. revert kullanmak yerine
   doğrudan değer atıyoruz — her durumda kesin görünüm.
*/
.a11y-modal {
    isolation: isolate;
}
.a11y-modal,
.a11y-modal * {
    filter: none !important;
}
/* Panel'in kendisi — sağlam beyaz, opak */
.a11y-modal .a11y-modal-panel {
    background-color: #ffffff !important;
    color: #2a2520 !important;
}
/* Header — sağlam gradient */
.a11y-modal .a11y-modal-header {
    background: linear-gradient(180deg, #f8f6f2 0%, #ffffff 100%) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
.a11y-modal .a11y-modal-title {
    color: #1a1410 !important;
}
.a11y-modal .a11y-modal-close {
    color: #1a1410 !important;
    background: transparent !important;
}
.a11y-modal .a11y-modal-close:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}
/* Body */
.a11y-modal .a11y-modal-body {
    background-color: #ffffff !important;
    color: #2a2520 !important;
}
/* Section başlıkları */
.a11y-modal .a11y-section-title {
    color: #6c5f53 !important;
    background: transparent !important;
}
.a11y-modal .a11y-label {
    color: #2a2520 !important;
    background: transparent !important;
}
.a11y-modal .a11y-label i {
    color: #6c5f53 !important;
}
/* Segmented buton grubu */
.a11y-modal .a11y-segmented {
    background-color: #f4f1ec !important;
}
.a11y-modal .a11y-seg-btn {
    background-color: transparent !important;
    color: #2a2520 !important;
    border: none !important;
}
.a11y-modal .a11y-seg-btn[aria-pressed="true"] {
    background-color: #ffffff !important;
    color: #1a1410 !important;
}
/* Toggle switch */
.a11y-modal .a11y-toggle {
    background-color: #d4cfc7 !important;
    border: none !important;
}
.a11y-modal .a11y-toggle[aria-checked="true"] {
    background-color: #4caf50 !important;
}
.a11y-modal .a11y-toggle-thumb {
    background-color: #ffffff !important;
}
/* Reset button */
.a11y-modal .a11y-reset-btn {
    background-color: transparent !important;
    color: #c0392b !important;
    border: 1.5px solid #c0392b !important;
}
.a11y-modal .a11y-reset-btn:hover {
    background-color: #c0392b !important;
    color: #ffffff !important;
}
/* Reset wrap separator */
.a11y-modal .a11y-reset-wrap {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
    background: transparent !important;
}
/* Reading Mode butonu — sağlam yeşil */
.a11y-modal .a11y-reading-mode-btn {
    background: linear-gradient(135deg, #2d8a3e 0%, #4caf50 100%) !important;
    color: #ffffff !important;
    border: none !important;
}
.a11y-modal .a11y-reading-mode-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, #1b5e20 0%, #388e3c 100%) !important;
}
.a11y-modal .a11y-reading-mode-icon {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}
.a11y-modal .a11y-reading-mode-title,
.a11y-modal .a11y-reading-mode-desc {
    color: #ffffff !important;
    background: transparent !important;
}
.a11y-modal .a11y-reading-mode-toggle {
    background-color: rgba(255, 255, 255, 0.25) !important;
}
.a11y-modal .a11y-reading-mode-btn[aria-pressed="true"] .a11y-reading-mode-toggle {
    background-color: #ffd700 !important;
}
/* Modal'ın kendisi a11y kontrast modlarından muaf — backdrop koyu kalsın */
.a11y-modal .a11y-modal-backdrop {
    background-color: rgba(15, 10, 5, 0.65) !important;
}

/* GRANULAR — Disleksi Font */
html[data-a11y-dyslexic="1"] body,
html[data-a11y-dyslexic="1"] body * {
    font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.16em !important;
}

/* GRANULAR — Reduced Motion */
html[data-a11y-motion="0"] *,
html[data-a11y-motion="0"] *::before,
html[data-a11y-motion="0"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* GRANULAR — Line Height */
html[data-a11y-lh="relaxed"] body  { line-height: 1.75 !important; }
html[data-a11y-lh="spacious"] body { line-height: 2.0 !important; }

/* GRANULAR — Link Underline */
html[data-a11y-link="1"] body a {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 2px !important;
}