/* ==========================================================================
   albinoyum.com - Core Stylesheet & Ultra-Legibility Design System
   WCAG 2.1 AAA Contrast Compliant
   100% Guaranteed Anti-Glare Photophobia (Dark), High-Contrast & Hover Clarity
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Lexend:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Lexend', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-size-base: 16px;
  
  /* Standard Light Theme Colors (High Contrast, Crisp & Legible) */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f1f5f9;
  --bg-card: #ffffff;
  --text-primary: #020617;        /* Pitch dark Slate-950 for absolute clarity */
  --text-secondary: #1e293b;      /* Deep Slate-800 */
  --text-muted: #334155;          /* Crisp Slate-700 (Never washed-out gray) */
  --accent-primary: #0284c7;
  --accent-hover: #0369a1;
  --accent-light: #e0f2fe;
  --border-color: #cbd5e1;        /* Defined, visible borders */
  --focus-ring: #0284c7;
  --hero-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
}

/* ==========================================================================
   1. Global Base Typography & High-Contrast Readability (Light Mode)
   ========================================================================== */
body {
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.25s ease, color 0.25s ease;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-weight: 800;
}

p, li, dd, dt, td, th {
  color: var(--text-secondary);
}

/* Override low contrast Tailwind grays with deep, rich readable tones */
.text-slate-600,
.text-slate-500 {
  color: #1e293b !important;
}

.text-slate-400 {
  color: #334155 !important;
}

/* Dark Footer Text Clarity */
footer,
footer * {
  border-color: #334155;
}

footer p,
footer span,
footer li,
footer a {
  color: #cbd5e1 !important;
}

footer a:hover {
  color: #38bdf8 !important;
}

footer h5,
footer h4 {
  color: #ffffff !important;
}

footer .text-slate-400,
footer .text-slate-500 {
  color: #94a3b8 !important;
}

/* ==========================================================================
   2. FOTOFOBİ / KARANLIK MOD (Anti-Glare Dark Mode) - TAM VE EKSİKSİZ
   ========================================================================== */
html.photophobia-mode,
html.theme-photophobia,
html.dark,
body.theme-photophobia,
body.photophobia-mode,
body.dark {
  --bg-primary: #0b0f19 !important;        /* Deep non-glare black-slate */
  --bg-secondary: #131c2e !important;      /* Slate-900 surface */
  --bg-surface: #1e293b !important;        /* Slate-800 card */
  --bg-surface-elevated: #334155 !important;
  --bg-card: #1e293b !important;
  --text-primary: #f8fafc !important;      /* Pure Crisp White */
  --text-secondary: #e2e8f0 !important;    /* Slate-200 */
  --text-muted: #cbd5e1 !important;        /* Slate-300 */
  --accent-primary: #38bdf8 !important;    /* Sky-400 */
  --accent-hover: #7dd3fc !important;
  --accent-light: #082f49 !important;
  --border-color: #334155 !important;
  --focus-ring: #38bdf8 !important;
  --hero-gradient: linear-gradient(135deg, #0b0f19 0%, #151e2e 50%, #0b0f19 100%) !important;
  background-color: #0b0f19 !important;
  color: #f8fafc !important;
}

/* Koyu modda Body & Main Zeminleri */
html.dark body,
html.photophobia-mode body,
body.theme-photophobia,
body.photophobia-mode,
body.dark {
  background-color: #0b0f19 !important;
  color: #f8fafc !important;
}

/* TÜM Gradient/Degrade Bölümleri Koyu Renk Yap */
html.dark [class*="bg-gradient-"],
html.photophobia-mode [class*="bg-gradient-"],
body.theme-photophobia [class*="bg-gradient-"],
body.photophobia-mode [class*="bg-gradient-"],
body.dark [class*="bg-gradient-"] {
  background-image: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

/* TÜM Açık Renkli Arka Plan Sınıflarını Koyu Yüzeye Dönüştür */
html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-slate-200,
html.dark .bg-sky-50,
html.dark .bg-sky-100,
html.dark .bg-amber-50,
html.dark .bg-amber-100,
html.dark .bg-emerald-50,
html.dark .bg-emerald-100,
html.dark .bg-purple-50,
html.dark .bg-purple-100,
html.dark .bg-indigo-50,
html.dark .bg-indigo-100,
html.dark .bg-rose-50,
html.dark .bg-rose-100,
html.dark .bg-rose-200,
html.photophobia-mode .bg-white,
html.photophobia-mode .bg-slate-50,
html.photophobia-mode .bg-slate-100,
html.photophobia-mode .bg-slate-200,
html.photophobia-mode .bg-sky-50,
html.photophobia-mode .bg-sky-100,
html.photophobia-mode .bg-sky-200,
html.photophobia-mode .bg-amber-50,
html.photophobia-mode .bg-amber-100,
html.photophobia-mode .bg-amber-200,
html.photophobia-mode .bg-emerald-50,
html.photophobia-mode .bg-emerald-100,
html.photophobia-mode .bg-emerald-200,
html.photophobia-mode .bg-purple-50,
html.photophobia-mode .bg-purple-100,
html.photophobia-mode .bg-purple-200,
html.photophobia-mode .bg-indigo-50,
html.photophobia-mode .bg-indigo-100,
html.photophobia-mode .bg-indigo-200,
html.photophobia-mode .bg-rose-50,
html.photophobia-mode .bg-rose-100,
html.photophobia-mode .bg-rose-200,
body.theme-photophobia .bg-white,
body.theme-photophobia .bg-slate-50,
body.theme-photophobia .bg-slate-100,
body.theme-photophobia .bg-slate-200,
body.theme-photophobia .bg-sky-50,
body.theme-photophobia .bg-sky-100,
body.theme-photophobia .bg-sky-200,
body.theme-photophobia .bg-amber-50,
body.theme-photophobia .bg-amber-100,
body.theme-photophobia .bg-amber-200,
body.theme-photophobia .bg-emerald-50,
body.theme-photophobia .bg-emerald-100,
body.theme-photophobia .bg-emerald-200,
body.theme-photophobia .bg-purple-50,
body.theme-photophobia .bg-purple-100,
body.theme-photophobia .bg-purple-200,
body.theme-photophobia .bg-indigo-50,
body.theme-photophobia .bg-indigo-100,
body.theme-photophobia .bg-indigo-200,
body.theme-photophobia .bg-rose-50,
body.theme-photophobia .bg-rose-100,
body.theme-photophobia .bg-rose-200,
body.dark .bg-white,
body.dark .bg-slate-50,
body.dark .bg-slate-100,
body.dark .bg-slate-200,
body.dark .bg-sky-50,
body.dark .bg-sky-100,
body.dark .bg-sky-200,
body.dark .bg-amber-50,
body.dark .bg-amber-100,
body.dark .bg-amber-200,
body.dark .bg-emerald-50,
body.dark .bg-emerald-100,
body.dark .bg-emerald-200,
body.dark .bg-purple-50,
body.dark .bg-purple-100,
body.dark .bg-purple-200,
body.dark .bg-indigo-50,
body.dark .bg-indigo-100,
body.dark .bg-indigo-200,
body.dark .bg-rose-50,
body.dark .bg-rose-100,
body.dark .bg-rose-200 {
  background-color: #1e293b !important;
  background-image: none !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* ==========================================================================
   ÖZEL ROZET VE ETİKET KONTRAST KORUMASI (Light & Dark Badge System)
   ========================================================================== */
/* Rose / Kırmızı Rozetler (Mit / Yanlış / Uyarı) */
.bg-rose-100, .bg-rose-200 {
  background-color: #ffe4e6 !important;
  color: #881337 !important;
  border: 1px solid #fda4af !important;
  font-weight: 800 !important;
}
html.dark .bg-rose-100, html.dark .bg-rose-200,
body.theme-photophobia .bg-rose-100, body.theme-photophobia .bg-rose-200,
body.dark .bg-rose-100, body.dark .bg-rose-200 {
  background-color: #4c0519 !important;
  color: #fecdd3 !important;
  border: 1px solid #9f1239 !important;
  font-weight: 800 !important;
}

/* Emerald / Yeşil Rozetler (Gerçek / Doğru / Onay) */
.bg-emerald-100, .bg-emerald-200 {
  background-color: #d1fae5 !important;
  color: #064e3b !important;
  border: 1px solid #6ee7b7 !important;
  font-weight: 800 !important;
}
html.dark .bg-emerald-100, html.dark .bg-emerald-200,
body.theme-photophobia .bg-emerald-100, body.theme-photophobia .bg-emerald-200,
body.dark .bg-emerald-100, body.dark .bg-emerald-200 {
  background-color: #022c22 !important;
  color: #a7f3d0 !important;
  border: 1px solid #065f46 !important;
  font-weight: 800 !important;
}

/* Amber / Sarı Rozetler (Bilgi / Uyarı) */
.bg-amber-100, .bg-amber-200 {
  background-color: #fef3c7 !important;
  color: #78350f !important;
  border: 1px solid #fcd34d !important;
  font-weight: 800 !important;
}
html.dark .bg-amber-100, html.dark .bg-amber-200,
body.theme-photophobia .bg-amber-100, body.theme-photophobia .bg-amber-200,
body.dark .bg-amber-100, body.dark .bg-amber-200 {
  background-color: #451a03 !important;
  color: #fde68a !important;
  border: 1px solid #92400e !important;
  font-weight: 800 !important;
}

/* Sky / Mavi Rozetler */
.bg-sky-100, .bg-sky-200 {
  background-color: #e0f2fe !important;
  color: #0c4a6e !important;
  border: 1px solid #7dd3fc !important;
  font-weight: 800 !important;
}
html.dark .bg-sky-100, html.dark .bg-sky-200,
body.theme-photophobia .bg-sky-100, body.theme-photophobia .bg-sky-200,
body.dark .bg-sky-100, body.dark .bg-sky-200 {
  background-color: #082f49 !important;
  color: #bae6fd !important;
  border: 1px solid #0369a1 !important;
  font-weight: 800 !important;
}

/* Purple / Mor Rozetler */
.bg-purple-100, .bg-purple-200 {
  background-color: #f3e8ff !important;
  color: #581c87 !important;
  border: 1px solid #d8b4fe !important;
  font-weight: 800 !important;
}
html.dark .bg-purple-100, html.dark .bg-purple-200,
body.theme-photophobia .bg-purple-100, body.theme-photophobia .bg-purple-200,
body.dark .bg-purple-100, body.dark .bg-purple-200 {
  background-color: #3b0764 !important;
  color: #e9d5ff !important;
  border: 1px solid #7e22ce !important;
  font-weight: 800 !important;
}

/* Koyu Modda TÜM Metinleri Parlak Beyaz/Açık Gri Yap */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark p, html.dark span, html.dark li, html.dark strong, html.dark label,
html.dark td, html.dark th, html.dark dt, html.dark dd,
html.photophobia-mode h1, html.photophobia-mode h2, html.photophobia-mode h3,
html.photophobia-mode h4, html.photophobia-mode h5, html.photophobia-mode h6,
html.photophobia-mode p, html.photophobia-mode span, html.photophobia-mode li,
html.photophobia-mode strong, html.photophobia-mode label,
html.photophobia-mode td, html.photophobia-mode th,
body.theme-photophobia h1, body.theme-photophobia h2, body.theme-photophobia h3,
body.theme-photophobia h4, body.theme-photophobia h5, body.theme-photophobia h6,
body.theme-photophobia p, body.theme-photophobia span, body.theme-photophobia li,
body.theme-photophobia strong, body.theme-photophobia label,
body.theme-photophobia td, body.theme-photophobia th,
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6,
body.dark p, body.dark span, body.dark li, body.dark strong, body.dark label,
body.dark td, body.dark th {
  color: #f8fafc !important;
}

/* Koyu Mod Renk Vurguları */
html.dark .text-sky-600, html.photophobia-mode .text-sky-600, body.theme-photophobia .text-sky-600 {
  color: #38bdf8 !important;
}
html.dark .text-amber-700, html.dark .text-amber-600, html.photophobia-mode .text-amber-700, body.theme-photophobia .text-amber-700 {
  color: #fde047 !important;
}
html.dark .text-emerald-700, html.dark .text-emerald-600, html.photophobia-mode .text-emerald-700, body.theme-photophobia .text-emerald-700 {
  color: #4ade80 !important;
}
html.dark .text-purple-700, html.dark .text-purple-600, html.photophobia-mode .text-purple-700, body.theme-photophobia .text-purple-700 {
  color: #c084fc !important;
}
html.dark .text-indigo-700, html.dark .text-indigo-600, html.photophobia-mode .text-indigo-700, body.theme-photophobia .text-indigo-700 {
  color: #818cf8 !important;
}
html.dark .text-rose-700, html.dark .text-rose-600, html.photophobia-mode .text-rose-700, body.theme-photophobia .text-rose-700 {
  color: #f87171 !important;
}

/* Header & Navbars in Dark Mode */
html.dark header,
html.photophobia-mode header,
body.theme-photophobia header,
body.dark header {
  background-color: rgba(15, 23, 42, 0.96) !important;
  border-bottom: 1px solid #334155 !important;
}

html.dark header a,
html.photophobia-mode header a,
body.theme-photophobia header a,
body.dark header a {
  color: #f8fafc !important;
}

html.dark #mobile-menu,
html.photophobia-mode #mobile-menu,
body.theme-photophobia #mobile-menu,
body.dark #mobile-menu {
  background-color: rgba(15, 23, 42, 0.98) !important;
  border-color: #334155 !important;
}

/* Koyu mod Form Elemanları */
html.dark input, html.dark select, html.dark textarea,
html.photophobia-mode input, html.photophobia-mode select, html.photophobia-mode textarea,
body.theme-photophobia input, body.theme-photophobia select, body.theme-photophobia textarea {
  background-color: #0b0f19 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}

/* Koyu mod Akordeon İçerikleri */
html.dark .accordion-content,
html.photophobia-mode .accordion-content,
body.theme-photophobia .accordion-content {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
}

/* Koyu mod Erişilebilirlik Paneli */
html.dark #accessibility-panel,
html.photophobia-mode #accessibility-panel,
body.theme-photophobia #accessibility-panel {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

html.dark #accessibility-panel * {
  color: #f8fafc !important;
}

/* ==========================================================================
   3. ÜZERİNE GELME (HOVER) KONTRAST VE OKUNURLUK KURALLARI
   ========================================================================== */

/* A. Aydınlık (Normal) Mod Hover Kuralları */
a:hover {
  color: #0284c7;
}

.hover\:bg-slate-50:hover {
  background-color: #f1f5f9 !important;
}

.hover\:bg-slate-100:hover {
  background-color: #e2e8f0 !important;
}

.hover\:bg-sky-50:hover {
  background-color: #e0f2fe !important;
}

/* B. Koyu / Fotofobi Modunda Hover Güvenliği (Asla Beyaz/Silik Olmaz) */
html.dark a:hover,
html.photophobia-mode a:hover,
body.theme-photophobia a:hover,
body.dark a:hover {
  color: #38bdf8 !important;
}

/* Koyu modda hover arkaplanlarının beyazlaşmasını önle */
html.dark [class*="hover:bg-slate-50"]:hover,
html.dark [class*="hover:bg-slate-100"]:hover,
html.dark [class*="hover:bg-slate-200"]:hover,
html.dark [class*="hover:bg-white"]:hover,
html.photophobia-mode [class*="hover:bg-slate-50"]:hover,
html.photophobia-mode [class*="hover:bg-slate-100"]:hover,
html.photophobia-mode [class*="hover:bg-slate-200"]:hover,
html.photophobia-mode [class*="hover:bg-white"]:hover,
body.theme-photophobia [class*="hover:bg-slate-50"]:hover,
body.theme-photophobia [class*="hover:bg-slate-100"]:hover,
body.theme-photophobia [class*="hover:bg-slate-200"]:hover,
body.theme-photophobia [class*="hover:bg-white"]:hover,
body.dark [class*="hover:bg-slate-50"]:hover,
body.dark [class*="hover:bg-slate-100"]:hover,
body.dark [class*="hover:bg-slate-200"]:hover,
body.dark [class*="hover:bg-white"]:hover {
  background-color: #334155 !important; /* Slate-700 net koyu hover vurgusu */
  color: #ffffff !important;
}

/* Koyu modda renkli buton ve bağlantı hover durumları */
html.dark [class*="hover:bg-sky-"]:hover,
html.photophobia-mode [class*="hover:bg-sky-"]:hover,
body.theme-photophobia [class*="hover:bg-sky-"]:hover,
body.dark [class*="hover:bg-sky-"]:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

/* Koyu modda Akordeon Başlığı Hover */
html.dark .accordion-header:hover,
html.photophobia-mode .accordion-header:hover,
body.theme-photophobia .accordion-header:hover,
body.dark .accordion-header:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Koyu modda Tablo Satırı Hover */
html.dark tr:hover,
html.photophobia-mode tr:hover,
body.theme-photophobia tr:hover,
body.dark tr:hover {
  background-color: #334155 !important;
}

html.dark tr:hover td,
html.photophobia-mode tr:hover td,
body.theme-photophobia tr:hover td,
body.dark tr:hover td {
  color: #ffffff !important;
}

/* Navigation Link Hover */
header nav a:hover {
  color: #0284c7 !important;
}

html.dark header nav a:hover,
html.photophobia-mode header nav a:hover,
body.theme-photophobia header nav a:hover,
body.dark header nav a:hover {
  color: #38bdf8 !important;
  background-color: #334155 !important;
}

/* ==========================================================================
   4. YÜKSEK KONTRAST MODU (WCAG 2.1 AAA - Pure Black & Cyber Yellow / White)
   ========================================================================== */
html.high-contrast-mode,
html.theme-high-contrast,
body.theme-high-contrast,
body.high-contrast-mode {
  --bg-primary: #000000 !important;
  --bg-secondary: #000000 !important;
  --bg-surface: #000000 !important;
  --bg-surface-elevated: #111111 !important;
  --bg-card: #000000 !important;
  --text-primary: #ffff00 !important;      /* Pure High-Luminance Yellow */
  --text-secondary: #ffffff !important;    /* Pure White */
  --text-muted: #ffff00 !important;
  --accent-primary: #ffff00 !important;
  --accent-hover: #ffffff !important;
  --accent-light: #222222 !important;
  --border-color: #ffff00 !important;      /* 2px Solid Yellow */
  --focus-ring: #ffffff !important;
  --hero-gradient: #000000 !important;
  background-color: #000000 !important;
  color: #ffff00 !important;
}

html.high-contrast-mode *,
body.theme-high-contrast * {
  border-color: #ffff00 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html.high-contrast-mode div,
html.high-contrast-mode section,
html.high-contrast-mode article,
html.high-contrast-mode header,
html.high-contrast-mode footer,
html.high-contrast-mode aside,
html.high-contrast-mode nav,
html.high-contrast-mode main,
body.theme-high-contrast div,
body.theme-high-contrast section,
body.theme-high-contrast article,
body.theme-high-contrast header,
body.theme-high-contrast footer,
body.theme-high-contrast aside,
body.theme-high-contrast nav,
body.theme-high-contrast main {
  background-color: #000000 !important;
  background-image: none !important;
}

html.high-contrast-mode h1, html.high-contrast-mode h2, html.high-contrast-mode h3,
html.high-contrast-mode h4, html.high-contrast-mode h5, html.high-contrast-mode h6,
body.theme-high-contrast h1, body.theme-high-contrast h2, body.theme-high-contrast h3,
body.theme-high-contrast h4, body.theme-high-contrast h5, body.theme-high-contrast h6 {
  color: #ffff00 !important;
}

html.high-contrast-mode p, html.high-contrast-mode span, html.high-contrast-mode li,
html.high-contrast-mode label, html.high-contrast-mode td, html.high-contrast-mode th,
body.theme-high-contrast p, body.theme-high-contrast span, body.theme-high-contrast li,
body.theme-high-contrast label, body.theme-high-contrast td, body.theme-high-contrast th {
  color: #ffffff !important;
}

html.high-contrast-mode a,
body.theme-high-contrast a {
  color: #ffff00 !important;
  text-decoration: underline !important;
  font-weight: 800 !important;
}

html.high-contrast-mode a:hover,
body.theme-high-contrast a:hover {
  color: #000000 !important;
  background-color: #ffff00 !important;
}

html.high-contrast-mode button,
html.high-contrast-mode input,
html.high-contrast-mode select,
html.high-contrast-mode textarea,
body.theme-high-contrast button,
body.theme-high-contrast input,
body.theme-high-contrast select,
body.theme-high-contrast textarea {
  border: 2px solid #ffff00 !important;
  color: #ffff00 !important;
  background-color: #000000 !important;
}

html.high-contrast-mode button:hover,
body.theme-high-contrast button:hover {
  color: #000000 !important;
  background-color: #ffff00 !important;
}

html.high-contrast-mode tr:hover,
body.theme-high-contrast tr:hover {
  background-color: #222222 !important;
}

html.high-contrast-mode .border,
html.high-contrast-mode .border-b,
html.high-contrast-mode .border-t,
html.high-contrast-mode .border-slate-200,
html.high-contrast-mode .border-slate-100,
body.theme-high-contrast .border,
body.theme-high-contrast .border-b,
body.theme-high-contrast .border-t,
body.theme-high-contrast .border-slate-200,
body.theme-high-contrast .border-slate-100 {
  border-width: 2px !important;
  border-color: #ffff00 !important;
}

/* ==========================================================================
   5. Dinamik Font Boyutlandırma
   ========================================================================== */
html.font-scale-sm, body.font-sm { --font-size-base: 14.5px; font-size: 90% !important; }
html.font-scale-normal, body.font-md { --font-size-base: 16px; font-size: 100% !important; }
html.font-scale-lg, html.font-scale-large, body.font-lg { --font-size-base: 19px; font-size: 118% !important; }
html.font-scale-xl, html.font-scale-xlarge, body.font-xl { --font-size-base: 22px; font-size: 135% !important; }

/* ==========================================================================
   6. Disleksi / Kolay Okuma Fontu
   ========================================================================== */
html.dyslexia-font,
html.font-dyslexia,
body.font-dyslexia,
body.dyslexia-font {
  font-family: 'Lexend', system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.12em !important;
  line-height: 1.9 !important;
}

/* ==========================================================================
   7. Kartlar, Çekmeceler ve Animasyonlar
   ========================================================================== */
.card-hover {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.12);
}

/* Accessibility Drawer Panel */
#accessibility-panel {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-in-out;
}

#accessibility-panel.hidden-panel {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

/* Accordion Transition */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 0;
}

.accordion-content.active {
  max-height: 1200px;
  opacity: 1;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  background-color: #f59e0b;
  color: #0f172a;
  font-weight: 800;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  transition: top 0.2s ease-in-out;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 3px solid var(--focus-ring, #0284c7) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

@media print {
  #accessibility-toggle-btn,
  #accessibility-panel,
  aside,
  header,
  footer,
  .skip-link,
  .no-print {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 12pt !important;
  }
}