/* ============================================
   MPHG - WCAG 2.2 Accessibility Widget
   ============================================ */

/* ── Skip Links ── */
.mphg-skip-links {
  position: fixed;
  top: -100%;
  left: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mphg-skip-links a {
  display: block;
  padding: 0.75rem 1.5rem;
  background: #C8302A;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: top 0.2s;
}
.mphg-skip-links a:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  outline: 3px solid #000;
  outline-offset: 2px;
}
.mphg-skip-links a:focus ~ a {
  top: 0;
}

/* ── Accessibility Widget Trigger Button ── */
.mphg-a11y-trigger {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 99998;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0D1B3E;
  color: #fff;
  border: 3px solid #C8302A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: transform 0.3s, box-shadow 0.3s;
  font-size: 0;
  line-height: 1;
}
.mphg-a11y-trigger:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(0,0,0,0.4);
}
.mphg-a11y-trigger:focus-visible {
  outline: 3px solid #C8302A;
  outline-offset: 3px;
}
.mphg-a11y-trigger svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* ── Overlay ── */
.mphg-a11y-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  backdrop-filter: blur(4px);
}
.mphg-a11y-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ── Widget Panel ── */
.mphg-a11y-panel {
  position: fixed;
  top: 0;
  left: -420px;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  z-index: 99999;
  box-shadow: 4px 0 40px rgba(0,0,0,0.25);
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mphg-a11y-panel.active {
  left: 0;
}

/* ── Panel Header ── */
.mphg-a11y-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #0D1B3E;
  color: #fff;
  flex-shrink: 0;
}
.mphg-a11y-header h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mphg-a11y-header h2 svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.mphg-a11y-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.mphg-a11y-close:hover {
  background: #C8302A;
}
.mphg-a11y-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Panel Body ── */
.mphg-a11y-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0;
  scroll-behavior: smooth;
}
.mphg-a11y-body::-webkit-scrollbar {
  width: 6px;
}
.mphg-a11y-body::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.mphg-a11y-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* ── Section / Category ── */
.mphg-a11y-section {
  border-bottom: 1px solid #f1f5f9;
}
.mphg-a11y-section:last-child {
  border-bottom: none;
}
.mphg-a11y-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0D1B3E;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
.mphg-a11y-section-title:hover {
  background: #f8fafc;
}
.mphg-a11y-section-title:focus-visible {
  outline: 2px solid #C8302A;
  outline-offset: -2px;
}
.mphg-a11y-section-title .icon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mphg-a11y-section-title .icon svg {
  width: 18px;
  height: 18px;
  fill: #C8302A;
  flex-shrink: 0;
}
.mphg-a11y-section-title .chevron {
  transition: transform 0.3s;
  fill: #94a3b8;
}
.mphg-a11y-section-title.open .chevron {
  transform: rotate(180deg);
}
.mphg-a11y-section-content {
  display: none;
  padding: 0 1.25rem 1rem;
}
.mphg-a11y-section-content.open {
  display: block;
}

/* ── Toggle Buttons ── */
.mphg-a11y-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mphg-a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.82rem;
  color: #374151;
  font-weight: 500;
}
.mphg-a11y-toggle:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.mphg-a11y-toggle:focus-visible {
  outline: 2px solid #C8302A;
  outline-offset: -1px;
}
.mphg-a11y-toggle.active {
  background: #0D1B3E;
  color: #fff;
  border-color: #0D1B3E;
}
.mphg-a11y-toggle .label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mphg-a11y-toggle .label svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  opacity: 0.7;
}
.mphg-a11y-toggle.active .label svg {
  opacity: 1;
}

/* ── Slider Controls ── */
.mphg-a11y-slider-group {
  margin-top: 0.75rem;
}
.mphg-a11y-slider-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.mphg-a11y-slider-label span:last-child {
  color: #C8302A;
  font-weight: 700;
}
.mphg-a11y-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  outline: none;
  transition: background 0.2s;
}
.mphg-a11y-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #C8302A;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.mphg-a11y-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.mphg-a11y-slider:focus-visible {
  outline: 2px solid #C8302A;
  outline-offset: 3px;
}

/* ── Color Grid ── */
.mphg-a11y-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.mphg-a11y-color-btn {
  padding: 0.5rem 0.25rem;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: #374151;
  transition: all 0.2s;
}
.mphg-a11y-color-btn:hover {
  border-color: #94a3b8;
}
.mphg-a11y-color-btn:focus-visible {
  outline: 2px solid #C8302A;
  outline-offset: 1px;
}
.mphg-a11y-color-btn.active {
  border-color: #C8302A;
  background: #fef2f2;
  color: #C8302A;
}
.mphg-a11y-color-btn .swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin: 0 auto 0.3rem;
  border: 2px solid rgba(0,0,0,0.1);
}

/* ── Profile Buttons ── */
.mphg-a11y-profiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
}
.mphg-a11y-profile-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  transition: all 0.2s;
}
.mphg-a11y-profile-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.mphg-a11y-profile-btn:focus-visible {
  outline: 2px solid #C8302A;
  outline-offset: -1px;
}
.mphg-a11y-profile-btn.active {
  background: #0D1B3E;
  color: #fff;
  border-color: #0D1B3E;
}
.mphg-a11y-profile-btn .profile-icon {
  font-size: 1rem;
  line-height: 1;
}

/* ── Reset Button ── */
.mphg-a11y-reset {
  display: block;
  width: calc(100% - 2.5rem);
  margin: 1rem 1.25rem 1.25rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.mphg-a11y-reset:hover {
  background: #C8302A;
  color: #fff;
  border-color: #C8302A;
}
.mphg-a11y-reset:focus-visible {
  outline: 2px solid #C8302A;
  outline-offset: 2px;
}

/* ── Panel Footer ── */
.mphg-a11y-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  flex-shrink: 0;
}
.mphg-a11y-footer p {
  margin: 0;
  font-size: 0.7rem;
  color: #94a3b8;
  text-align: center;
  line-height: 1.5;
}
.mphg-a11y-footer a {
  color: #C8302A;
  text-decoration: underline;
}

/* ══════════════════════════════════════
   ACCESSIBILITY MODES (Applied to body)
════════════════════════════════════ */

/* ── Focus Highlight ── */
body.mphg-focus-highlight *:focus-visible {
  outline: 3px solid #C8302A !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(200,48,42,0.15) !important;
}

/* ── High Contrast ── */
body.mphg-high-contrast {
  filter: contrast(1.4);
}

/* ── Dark Contrast ── */
body.mphg-dark-contrast {
  background: #000 !important;
  color: #fff !important;
}
body.mphg-dark-contrast .site-header,
body.mphg-dark-contrast .site-topbar,
body.mphg-dark-contrast .site-navbar,
body.mphg-dark-contrast .quick-cards-bar,
body.mphg-dark-contrast .saglik-kart,
body.mphg-dark-contrast .haber-kart,
body.mphg-dark-contrast .hizli-kart,
body.mphg-dark-contrast .doktor-kart,
body.mphg-dark-contrast .kalite-slide .logo-badge,
body.mphg-dark-contrast footer,
body.mphg-dark-contrast .cookie-consent-banner {
  background: #1a1a1a !important;
  color: #fff !important;
}
body.mphg-dark-contrast .site-topbar { background: #111 !important; }
body.mphg-dark-contrast .site-navbar { background: #222 !important; }
body.mphg-dark-contrast h1, body.mphg-dark-contrast h2,
body.mphg-dark-contrast h3, body.mphg-dark-contrast h4,
body.mphg-dark-contrast h5, body.mphg-dark-contrast h6 {
  color: #fff !important;
}
body.mphg-dark-contrast a { color: #6db3f2 !important; }
body.mphg-dark-contrast p, body.mphg-dark-contrast span,
body.mphg-dark-contrast li { color: #e0e0e0 !important; }

/* ── Invert Colors ── */
body.mphg-invert-colors {
  filter: invert(1) hue-rotate(180deg);
}
body.mphg-invert-colors img,
body.mphg-invert-colors video,
body.mphg-invert-colors svg:not(.mphg-a11y-panel svg) {
  filter: invert(1) hue-rotate(180deg);
}

/* ── Monochrome ── */
body.mphg-monochrome {
  filter: grayscale(1);
}

/* ── Low Saturation ── */
body.mphg-low-saturation {
  filter: saturate(0.3);
}

/* ── High Saturation ── */
body.mphg-high-saturation {
  filter: saturate(1.8);
}

/* ── Dyslexia Font ── */
body.mphg-dyslexia-font,
body.mphg-dyslexia-font * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', cursive !important;
}

/* ── Readable Font ── */
body.mphg-readable-font,
body.mphg-readable-font * {
  font-family: 'Verdana', 'Arial', sans-serif !important;
}

/* ── Stop Animations ── */
body.mphg-stop-animations *,
body.mphg-stop-animations *::before,
body.mphg-stop-animations *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* ── Hide Images ── */
body.mphg-hide-images img,
body.mphg-hide-images video,
body.mphg-hide-images picture {
  visibility: hidden !important;
}

/* ── Highlight Links ── */
body.mphg-highlight-links a {
  background: #fef08a !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

/* ── Highlight Titles ── */
body.mphg-highlight-titles h1,
body.mphg-highlight-titles h2,
body.mphg-highlight-titles h3,
body.mphg-highlight-titles h4,
body.mphg-highlight-titles h5,
body.mphg-highlight-titles h6 {
  background: #fef08a !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* ── Big Black Cursor ── */
body.mphg-big-black-cursor,
body.mphg-big-black-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='14' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 16 16, auto !important;
}

/* ── Big White Cursor ── */
body.mphg-big-white-cursor,
body.mphg-big-white-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='14' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 16 16, auto !important;
}

/* ── Reading Guide (Horizontal line following cursor) ── */
.mphg-reading-guide-line {
  position: fixed;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(200, 48, 42, 0.35);
  pointer-events: none;
  z-index: 99999;
  display: none;
  top: 50%;
}
body.mphg-reading-guide .mphg-reading-guide-line {
  display: block;
}

/* ── Reading Mask ── */
.mphg-reading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99997;
  display: none;
}
body.mphg-reading-mask-active .mphg-reading-mask {
  display: block;
}
.mphg-reading-mask-top,
.mphg-reading-mask-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.mphg-reading-mask-top { top: 0; }
.mphg-reading-mask-bottom { bottom: 0; }

/* ── Text Magnifier ── */
.mphg-text-magnifier {
  position: fixed;
  display: none;
  padding: 12px 16px;
  background: #0D1B3E;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  border-radius: 8px;
  max-width: 400px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 99999;
  line-height: 1.5;
  word-wrap: break-word;
}
body.mphg-text-magnifier-active .mphg-text-magnifier {
  display: block;
}

/* ── Blue Light Filter ── */
body.mphg-blue-light-filter {
  filter: sepia(0.15) saturate(1.2);
}

/* ── Color Blindness Filters ── */
body.mphg-protanomaly {
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeColorMatrix values='0.817 0.183 0 0 0 0.333 0.667 0 0 0 0 0 1 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#f");
}
body.mphg-deuteranomaly {
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeColorMatrix values='0.8 0.2 0 0 0 0.258 0.742 0 0 0 0 0 1 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#f");
}
body.mphg-tritanomaly {
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0.333 0.667 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#f");
}

/* ── Mute Sounds (visual indicator) ── */
body.mphg-mute-sounds audio,
body.mphg-mute-sounds video {
  muted !important;
}

/* ── Content Scaling ── */
body.mphg-content-scale-110 { zoom: 1.1; }
body.mphg-content-scale-120 { zoom: 1.2; }
body.mphg-content-scale-130 { zoom: 1.3; }
body.mphg-content-scale-140 { zoom: 1.4; }

/* ── Text Magnifier Overlay ── */
.mphg-magnifier-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: none;
}
body.mphg-text-magnifier-overlay-active .mphg-magnifier-overlay {
  display: flex;
}
.mphg-magnifier-content {
  max-width: 80%;
  max-height: 60vh;
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  font-size: 2rem;
  line-height: 1.8;
  color: #1e293b;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* ── Focus indicator ring (global) ── */
*:focus-visible {
  outline: 2px solid #C8302A;
  outline-offset: 2px;
}

/* ══════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width: 480px) {
  .mphg-a11y-trigger {
    bottom: 16px;
    left: 16px;
    width: 50px;
    height: 50px;
  }
  .mphg-a11y-trigger svg {
    width: 24px;
    height: 24px;
  }
  .mphg-a11y-panel {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ── Print: hide widget ── */
@media print {
  .mphg-a11y-trigger,
  .mphg-a11y-panel,
  .mphg-a11y-overlay,
  .mphg-skip-links,
  .mphg-reading-guide-line,
  .mphg-reading-mask,
  .mphg-text-magnifier,
  .mphg-magnifier-overlay {
    display: none !important;
  }
}