/* site/01/css/erisebilirlik.css — Gelişmiş Erişilebilirlik v2.0 */

/* ====================================================
   TOGGLE BUTONU
==================================================== */
.s01-erisebilir-toggle {
   position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:8500;
   background:linear-gradient(180deg,var(--pc,#1a3a6e),var(--sc,#c0392b));
   color:#fff;border:none;border-radius:10px 0 0 10px;width:38px;height:88px;
   cursor:pointer;display:flex;flex-direction:column;align-items:center;
   justify-content:center;gap:7px;box-shadow:-3px 0 20px rgba(0,0,0,.4);
   transition:.25s;padding:0;outline:none;
}
.s01-erisebilir-toggle:hover { width:44px; box-shadow:-5px 0 28px rgba(0,0,0,.5); }
.s01-erisebilir-toggle:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.s01-erisebilir-toggle i { font-size:18px; }
.s01-erisebilir-toggle span {
   font-size:8.5px;font-weight:800;letter-spacing:.05em;writing-mode:vertical-rl;
   text-orientation:mixed;transform:rotate(180deg);opacity:.9;line-height:1;
}
.s01-erisebilir-toggle.sol {
   right:auto;left:0;border-radius:0 10px 10px 0;
   box-shadow:3px 0 20px rgba(0,0,0,.4);
}
.s01-erisebilir-toggle.sol:hover { box-shadow:5px 0 28px rgba(0,0,0,.5); }

/* Köşe pozisyonlar — sag-alt / sol-alt */
.s01-erisebilir-toggle.kose {
   top:auto;transform:none;width:52px;height:52px;border-radius:50%;
   bottom:var(--er-y,30px);right:var(--er-x,20px);
   box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.s01-erisebilir-toggle.kose span { writing-mode:horizontal-tb;transform:none;font-size:7px; }
.s01-erisebilir-toggle.kose:hover { width:58px;height:58px; box-shadow:0 6px 28px rgba(0,0,0,.6); }
.s01-erisebilir-toggle.kose.sol { right:auto;left:var(--er-x,20px); border-radius:50%; box-shadow:0 4px 20px rgba(0,0,0,.5); }
.s01-erisebilir-toggle.kose.sol:hover { box-shadow:0 6px 28px rgba(0,0,0,.6); }

/* ====================================================
   PANEL
==================================================== */
.s01-erisebilir-panel {
   position:fixed;right:-360px;top:50%;transform:translateY(-50%);z-index:8499;
   width:340px;background:rgba(10,8,30,.97);border:1px solid rgba(255,255,255,.1);
   border-right:none;border-radius:18px 0 0 18px;padding:0;
   box-shadow:-10px 0 50px rgba(0,0,0,.6);
   backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
   transition:right .3s cubic-bezier(.4,0,.2,1);max-height:92vh;overflow-y:auto;
   scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent;
}
.s01-erisebilir-panel.acik { right:0; }
.s01-erisebilir-panel::-webkit-scrollbar { width:4px; }
.s01-erisebilir-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12);border-radius:2px; }
.s01-erisebilir-panel.sol {
   right:auto;left:-360px;border-radius:0 18px 18px 0;
   border-left:none;border-right:1px solid rgba(255,255,255,.1);
   box-shadow:10px 0 50px rgba(0,0,0,.6);
   transition:left .3s cubic-bezier(.4,0,.2,1);
}
.s01-erisebilir-panel.sol.acik { left:0; }

/* Panel başlık */
.s01-er-baslik {
   display:flex;align-items:center;justify-content:space-between;
   padding:18px 20px 16px;border-bottom:1px solid rgba(255,255,255,.08);
   position:sticky;top:0;background:rgba(10,8,30,.98);z-index:1;
   border-radius:18px 0 0 0;
}
.s01-erisebilir-panel.sol .s01-er-baslik { border-radius:0 18px 0 0; }
.s01-er-baslik-sol { display:flex;align-items:center;gap:10px; }
.s01-er-baslik-sol i {
   font-size:20px;
   background:linear-gradient(135deg,var(--pc,#1a3a6e),var(--ac,#f39c12));
   -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.s01-er-baslik h2 { font-size:.88rem;font-weight:800;color:#fff;margin:0; }
.s01-er-kapat {
   background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
   color:rgba(255,255,255,.7);width:30px;height:30px;border-radius:8px;
   font-size:13px;cursor:pointer;display:flex;align-items:center;
   justify-content:center;transition:.2s;flex-shrink:0;
}
.s01-er-kapat:hover { background:rgba(255,255,255,.18);color:#fff; }

/* Bölüm başlığı */
.s01-er-bolum {
   font-size:.6rem;font-weight:900;color:rgba(255,255,255,.35);
   text-transform:uppercase;letter-spacing:.14em;
   margin-top:18px;margin-bottom:8px;padding:0 20px;
}

/* Grid */
.s01-er-grid { display:grid;gap:7px;padding:0 20px; }
.s01-er-grid-2 { grid-template-columns:repeat(2,1fr); }
.s01-er-grid-3 { grid-template-columns:repeat(3,1fr); }

/* Buton */
.s01-er-btn {
   display:flex;flex-direction:column;align-items:center;gap:5px;
   padding:11px 6px;background:rgba(255,255,255,.05);
   border:1px solid rgba(255,255,255,.09);border-radius:12px;
   color:rgba(255,255,255,.65);cursor:pointer;transition:.2s;
   text-align:center;font-family:inherit;
}
.s01-er-btn:hover {
   background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);
   color:#fff;transform:translateY(-1px);
}
.s01-er-btn:focus-visible { outline:2px solid var(--pc,#1a3a6e);outline-offset:2px; }
.s01-er-btn.aktif {
   background:linear-gradient(135deg,var(--pc,#1a3a6e),var(--sc,#c0392b));
   border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.s01-er-btn i { font-size:18px;flex-shrink:0; }
.s01-er-btn span { font-size:.65rem;font-weight:700;line-height:1.2; }

/* Hizalama (4 buton yan yana) */
.s01-er-hizalama {
   display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
   margin-top:7px;padding:0 20px;
}
.s01-er-hizala-btn { padding:10px 4px; }
.s01-er-hizala-btn i { font-size:16px; }

/* Yazı boyutu slider */
.s01-er-yazi-wrap {
   background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
   border-radius:12px;padding:12px 14px;margin:0 20px;
}
.s01-er-yazi-ust { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; }
.s01-er-yazi-etiket { font-size:.75rem;color:rgba(255,255,255,.55);font-weight:600; }
.s01-er-yazi-deger { font-size:.78rem;color:var(--ac,#f39c12);font-weight:800; }
.s01-er-yazi-slider { width:100%;accent-color:var(--pc,#1a3a6e);cursor:pointer; }

/* Footer */
.s01-er-footer { padding:14px 20px 20px;margin-top:4px;border-top:1px solid rgba(255,255,255,.07); }
.s01-er-sifirla {
   width:100%;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);
   color:#f87171;border-radius:10px;padding:9px 14px;font-size:.8rem;font-weight:700;
   cursor:pointer;transition:.2s;display:flex;align-items:center;
   justify-content:center;gap:8px;font-family:inherit;
}
.s01-er-sifirla:hover { background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.4); }
.s01-er-surum { display:flex;justify-content:space-between;margin-top:10px; }
.s01-er-surum p { font-size:.63rem;color:rgba(255,255,255,.25);margin:0;line-height:1; }

/* ====================================================
   OKUMA KILAVUZU
==================================================== */
.s01-okuma-klavuzu {
   position:fixed;left:0;right:0;height:44px;pointer-events:none;z-index:99997;
   background:rgba(255,255,150,.12);border-top:2px solid rgba(255,220,0,.5);
   border-bottom:2px solid rgba(255,220,0,.5);
   box-shadow:0 0 0 9999px rgba(0,0,0,.06);transition:top .05s linear;
}

/* ====================================================
   MOBİL
==================================================== */
@media(max-width:767px) {
   .s01-erisebilir-toggle {
      top:auto;bottom:130px;transform:none;height:64px;width:32px;
      border-radius:10px 0 0 10px;
   }
   .s01-erisebilir-panel {
      top:auto;bottom:0;right:-100%;width:100%;max-width:100%;transform:none;
      border-radius:18px 18px 0 0;border-right:1px solid rgba(255,255,255,.1);
      border-bottom:none;max-height:80vh;
      transition:right .3s cubic-bezier(.4,0,.2,1);
   }
   .s01-erisebilir-panel .s01-er-baslik { border-radius:18px 18px 0 0; }
   .s01-erisebilir-panel.acik { right:0; }
   .s01-erisebilir-panel.sol {
      left:auto;right:-100%;border-radius:18px 18px 0 0;
      border-left:1px solid rgba(255,255,255,.1);
      transition:right .3s cubic-bezier(.4,0,.2,1);
   }
   .s01-erisebilir-panel.sol.acik { left:auto;right:0; }
}

/* ====================================================
   1 — DİSLEKSİ
==================================================== */
body.s01-dyslexia { font-family:'Verdana',Geneva,sans-serif !important;letter-spacing:.05em;word-spacing:.18em; }
body.s01-dyslexia p,body.s01-dyslexia li { line-height:2 !important;letter-spacing:.1em !important;word-spacing:.22em !important; }
body.s01-dyslexia h1,body.s01-dyslexia h2,body.s01-dyslexia h3 {
   letter-spacing:.07em !important;background:none !important;-webkit-text-fill-color:currentColor !important;
}

/* ====================================================
   2 — DEHB
==================================================== */
body.s01-adhd *,body.s01-adhd *::before,body.s01-adhd *::after {
   animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.08s !important;
}
body.s01-adhd p,body.s01-adhd li { line-height:1.95 !important;letter-spacing:.025em; }

/* ====================================================
   3 — YAŞLILAR
==================================================== */
body.s01-elderly { font-size:18px !important; }
body.s01-elderly .site-01-slide-btn,body.s01-elderly .site-01-btn-tumu,
body.s01-elderly .site-01-btn-tumu-sag { font-size:1rem !important;padding:14px 28px !important;min-height:48px !important; }

/* ====================================================
   4 — YÜKSEK KONTRAST
==================================================== */
body.s01-high-contrast { filter:contrast(2) brightness(1.05); }

/* ====================================================
   5 — GRİ TONLAMA
==================================================== */
body.s01-grayscale { filter:grayscale(100%); }

/* ====================================================
   6 — RENKLERİ TERS ÇEVİR
==================================================== */
body.s01-invert { filter:invert(1) hue-rotate(180deg); }
body.s01-invert img,body.s01-invert video,body.s01-invert picture {
   filter:invert(1) hue-rotate(180deg);
}

/* ====================================================
   7 — KARANLIK MOD
==================================================== */
body.s01-dark-mode { background:#0d0d0d !important;color:#e8e8e8 !important; }
body.s01-dark-mode .site-01-header,body.s01-dark-mode nav.site-01-nav,
body.s01-dark-mode .site-01-topbar { background:#111 !important; }
body.s01-dark-mode .site-01-haber-kart,body.s01-dark-mode .site-01-duyuru-item,
body.s01-dark-mode .site-01-proje-kart,body.s01-dark-mode .site-01-etkinlik-kart,
body.s01-dark-mode .site-01-feature-card { background:#1a1a1a !important;border-color:#2a2a2a !important; }
body.s01-dark-mode .site-01-footer { background:#0a0a0a !important; }
body.s01-dark-mode a { color:#6ab4ff; }

/* ====================================================
   8 — MAVİ IŞIK FİLTRESİ
==================================================== */
body.s01-blue-light::after {
   content:'';position:fixed;inset:0;background:rgba(255,180,50,.12);
   mix-blend-mode:multiply;pointer-events:none;z-index:99996;
}
body.s01-blue-light { filter:sepia(0.25) saturate(0.9); }

/* ====================================================
   9 — RESİMLERİ GİZLE
==================================================== */
body.s01-hide-images img,body.s01-hide-images picture,
body.s01-hide-images video,body.s01-hide-images .site-01-slide-picture { visibility:hidden !important;opacity:0 !important; }
body.s01-hide-images .s01-erisebilir-panel img,
body.s01-hide-images .s01-erisebilir-toggle img { visibility:visible !important;opacity:1 !important; }

/* ====================================================
   10 — BÜYÜK METİN
==================================================== */
body.s01-big-text { font-size:120% !important; }
body.s01-big-text .site-01-slide-title { font-size:clamp(2.8rem,7vw,6rem) !important; }

/* ====================================================
   11 — OKUNABİLİR FONT
==================================================== */
body.s01-readable-font,body.s01-readable-font * { font-family:'Verdana',Geneva,Tahoma,sans-serif !important; }

/* ====================================================
   12 — HARF ARALIĞI
==================================================== */
body.s01-letter-spacing,body.s01-letter-spacing p,body.s01-letter-spacing li,
body.s01-letter-spacing h1,body.s01-letter-spacing h2,body.s01-letter-spacing h3 { letter-spacing:.12em !important; }

/* ====================================================
   13 — SATIR YÜKSEKLİĞİ
==================================================== */
body.s01-line-height,body.s01-line-height p,body.s01-line-height li { line-height:2.2 !important; }

/* ====================================================
   14-17 — METİN HİZALAMA
==================================================== */
body.s01-align-left p,body.s01-align-left li { text-align:left !important; }
body.s01-align-center p,body.s01-align-center li { text-align:center !important; }
body.s01-align-right p,body.s01-align-right li { text-align:right !important; }
body.s01-align-justify p,body.s01-align-justify li { text-align:justify !important; }

/* ====================================================
   18 — LİNKLERİ VURGULA
==================================================== */
body.s01-highlight-links a {
   background:rgba(255,235,59,.25) !important;outline:2px solid #ffc107 !important;
   outline-offset:1px !important;text-decoration:underline !important;
   border-radius:3px !important;padding:0 2px !important;
}

/* ====================================================
   19 — BAŞLIKLARI VURGULA
==================================================== */
body.s01-highlight-headings h1,body.s01-highlight-headings h2,
body.s01-highlight-headings h3,body.s01-highlight-headings h4,
body.s01-highlight-headings h5,body.s01-highlight-headings h6 {
   border-left:4px solid var(--pc,#1a3a6e) !important;padding-left:10px !important;
   background:rgba(255,255,255,.04) !important;-webkit-text-fill-color:currentColor !important;
   background-clip:initial !important;
}

/* ====================================================
   20 — ODAK GÖSTERGESİ
==================================================== */
body.s01-focus-indicator :focus {
   outline:3px solid var(--pc,#1a3a6e) !important;outline-offset:3px !important;
   box-shadow:0 0 0 6px rgba(26,58,110,.25) !important;border-radius:4px !important;
}

/* ====================================================
   21 — ANİMASYONLARI AZALT
==================================================== */
body.s01-reduce-motion *,body.s01-reduce-motion *::before,body.s01-reduce-motion *::after {
   animation-duration:.001s !important;animation-iteration-count:1 !important;
   transition-duration:.001s !important;animation-delay:.001s !important;
   scroll-behavior:auto !important;
}
body.s01-reduce-motion .site-01-slider-section .swiper-wrapper { transition-duration:.001s !important; }

/* ====================================================
   22 — BÜYÜK İMLEÇ
==================================================== */
body.s01-big-cursor,body.s01-big-cursor * {
   cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='30' d='M109,11l298,193-149,40,88,176-66,28-89-177-82,77z'/%3E%3C/svg%3E") 6 4, auto !important;
}

/* ====================================================
   23 — KLAVYE NAVİGASYONU
==================================================== */
body.s01-keyboard-nav :focus-visible {
   outline:3px solid #ff0 !important;outline-offset:4px !important;
   box-shadow:0 0 0 7px rgba(255,255,0,.25) !important;border-radius:4px !important;
}

/* ====================================================
   YAZIBOYUTU SLIDER
==================================================== */
body.s01-custom-yazi { font-size:calc(16px * var(--s01-yaziboyut, 1)) !important; }
body.s01-custom-yazi p,body.s01-custom-yazi li { font-size:calc(1rem * var(--s01-yaziboyut, 1)) !important; }
body.s01-custom-yazi h1 { font-size:calc(2.5rem * var(--s01-yaziboyut, 1)) !important; }
body.s01-custom-yazi h2 { font-size:calc(2rem * var(--s01-yaziboyut, 1)) !important; }
body.s01-custom-yazi h3 { font-size:calc(1.5rem * var(--s01-yaziboyut, 1)) !important; }