/*
  Erişilebilirlik sayfası (sabit_sayfalar/erisilebilirlik). İlk iki bölüm pikap reposundaki
  sabit_sayfalar/accessibility (area-item-1/2) portu; özellik kartları container query (cqw) ile ölçeklenir.
  Zemin (--a11y-bg) erişilebilirlik aracının siyah panelinden ayrışacak şekilde seçildi.
*/

/* Zemin, erişilebilirlik aracının siyah (#000) panelinden ayrışsın diye koyu, hafif yeşile çalan gri. */
#page-accessibility { --a11y-bg: rgb(20, 22, 21); position: relative; width: 100%; overflow-x: clip; background: var(--a11y-bg); color: #ffffff; }
#page-accessibility button { font-family: inherit; }

/* ---------- Ortak kart (tile) ---------- */
#page-accessibility .tile { position: relative; container-type: inline-size; border-radius: 20%; overflow: hidden; background: rgb(19, 19, 19); box-shadow: inset -0.8px 3.2px 5.76px rgba(72, 218, 120, 0.11); }
#page-accessibility .tile .ic { position: absolute; left: 4.45cqw; top: 4.45cqw; width: 35.7cqw; height: 35.7cqw; border-radius: 50%; background: rgb(26, 26, 26); display: flex; align-items: center; justify-content: center; }
#page-accessibility .tile .ic svg { width: 13.5cqw; height: 13.5cqw; display: block; }
#page-accessibility .tile .lb { position: absolute; left: 15.6cqw; top: 48.8cqw; font-family: 'Eudoxus Sans', var(--font); font-weight: 500; font-size: 8.9cqw; line-height: 1; white-space: nowrap; color: #ffffff; }

/* Anahtar (switch) + topuz */
#page-accessibility .sw { position: absolute; left: 54.2cqw; top: 66.8cqw; width: 40cqw; height: 26.7cqw; border: 0; border-radius: 20cqw; padding: 0 2.5cqw; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; background: rgb(26, 26, 26); box-shadow: inset 0 0 0 0.28cqw rgb(45, 45, 45); transition: background .35s ease, box-shadow .35s ease; }
#page-accessibility .sw.on { justify-content: flex-end; background: url(../../img/erisilebilirlik/noise.webp) center / 100% 100% no-repeat, rgb(72, 218, 120); box-shadow: 0 0.7cqw 20cqw rgba(78, 221, 129, 0.7), inset 0 0 0.55cqw rgba(255, 255, 255, 0.75); }
#page-accessibility .knob { position: relative; width: 22.2cqw; height: 22.2cqw; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(40% 50% at 24% 6%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 100%), rgb(48, 48, 48); box-shadow: -2.5cqw -2.8cqw 1.1cqw rgba(0, 0, 0, 0.01), -1.7cqw -1.8cqw 1cqw rgba(0, 0, 0, 0.1), -1cqw -1cqw 0.8cqw rgba(0, 0, 0, 0.35), -0.4cqw -0.4cqw 0.55cqw rgba(0, 0, 0, 0.59); }
#page-accessibility .knob > span { position: absolute; inset: 1.13cqw; border-radius: 50%; background: rgb(19, 19, 19); box-shadow: 0 0.1cqw 0.1cqw rgba(255, 255, 255, 0.25), inset 0 0.4cqw 0.4cqw rgba(0, 0, 0, 0.35); }

/* Artı / eksi yuvarlakları */
#page-accessibility .pm { position: absolute; top: 60cqw; width: 35cqw; height: 35cqw; border: 0; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 12cqw; line-height: 1; color: #ffffff; }
#page-accessibility .pm.dec { left: 22cqw; background: rgb(26, 26, 26); box-shadow: inset 0 0 0 0.3cqw rgb(45, 45, 45); }
#page-accessibility .pm.inc { left: 60cqw; background: rgb(117, 255, 165); color: #151515; }

/* ---------- 1) Açılış sahnesi ---------- */
/* pikap/sabit_sayfalar/accessibility area-item-1 portu. Sahne 100vh sabit, 160vh kaydırma boyunca
   kalır: 0-100vh giriş (el kayar, yanan görsel belirir, harfler dolar), 100-140vh çıkış. */
#page-accessibility .hero-area { position: relative; height: 260vh; background: var(--a11y-bg); }
#page-accessibility .hero-area > .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--a11y-bg); }
/* Anahtar yandıkça arkada büyüyen yeşil ışıma */
#page-accessibility .hero-area .glow { position: absolute; left: 50%; top: 42%; width: min(1100px, 110vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(72, 218, 120, 0.16), rgba(72, 218, 120, 0.05) 55%, rgba(72, 218, 120, 0) 100%); opacity: 0; pointer-events: none; will-change: transform, opacity; }
/* .mid transform/scale almaz (yalıtılmış katman olur, screen harmanlaması zemine ulaşmaz); küçültme zoom ile. */
#page-accessibility .hero-area .mid { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
#page-accessibility .hero-area .mid .first, #page-accessibility .hero-area .mid .last { pointer-events: none; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 1464px; height: 1130px; max-width: none; will-change: transform, opacity; }
#page-accessibility .hero-area .mid .last { opacity: 0; }
/* Görsellerin siyah halesi zemini örtmesin: screen ile siyah saydamlaşır, kartlar ve ışık korunur. */
#page-accessibility .hero-area .mid .first, #page-accessibility .hero-area .mid .last { mix-blend-mode: screen; }
#page-accessibility .hero-area .slick { position: absolute; top: -97px; left: 10px; pointer-events: none; will-change: transform; }
#page-accessibility .hero-area .slick span { display: block; width: 102px; height: 102px; border-radius: 100%; background: url(../../img/erisilebilirlik/slick-pin.webp) no-repeat center / contain; box-shadow: -0.64px -0.64px 1.28px 0 #000000AD; opacity: .5; will-change: transform, opacity; }
#page-accessibility .hero-area .slick img { position: absolute; top: 20%; left: 20%; width: 916px; height: 665px; max-width: none; pointer-events: none; will-change: transform, opacity; }
/* Alt kısım zemine doğru koyulaşır; metin arkadaki soluk kart yazılarıyla karışmaz. */
#page-accessibility .hero-area > .sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to top, var(--a11y-bg) 36%, rgba(20, 22, 21, .85) 55%, rgba(20, 22, 21, 0)); z-index: 4; pointer-events: none; }
#page-accessibility .hero-area .texts { position: absolute; left: 7.002%; bottom: clamp(56px, 10vh, 100px); width: 505px; max-width: 86vw; z-index: 5; will-change: transform, opacity; }
#page-accessibility .hero-area .texts h1 { margin: 0; font-weight: 500; font-size: 32px; line-height: 100%; color: #ffffff; }

/* ---------- 2) Araç tanıtımı (pikap area-item-2 portu) ----------
   Alan alttan yükselir (100vh), 160vh sabit kalır; 140vh sonra solar ve arada boşluk kalır. */
#page-accessibility .tool-area { position: relative; height: 260vh; background: var(--a11y-bg); }
#page-accessibility .tool-area > .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: 0 7.002%; box-sizing: border-box; background: var(--a11y-bg); opacity: 0; will-change: opacity; }
#page-accessibility .tool-area .glow { position: absolute; left: 56%; top: 55%; width: min(1000px, 120vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(72, 218, 120, 0.12), rgba(72, 218, 120, 0) 100%); pointer-events: none; will-change: transform; }
#page-accessibility .tool-area .bg-clip { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
#page-accessibility .tool-area .bg { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: min(1355px, calc(92vh * 1355 / 1194)); aspect-ratio: 1355 / 1194; max-width: none; }
#page-accessibility .tool-area .layer { position: absolute; height: auto; max-width: none; will-change: transform; }
#page-accessibility .tool-area .layer-1 { top: 34.1709%; left: -0.0738%; width: 43.3948%; z-index: 4; }
#page-accessibility .tool-area .layer-2 { top: 6.5327%; left: 34.3911%; width: 28.0443%; z-index: 3; }
#page-accessibility .tool-area .layer-3 { top: 0; left: 60.6642%; width: 13.7269%; z-index: 1; }
#page-accessibility .tool-area .layer-4 { top: 30.6533%; left: 80.5166%; width: 19.4834%; z-index: 2; }
#page-accessibility .tool-area .texts { position: absolute; top: 150px; left: 7.002%; width: 505px; max-width: 86vw; z-index: 5; }
#page-accessibility .tool-area .texts h2 { margin: 0; font-weight: 500; font-size: 32px; line-height: 100%; color: #ffffff; }
#page-accessibility .tool-area .texts p { margin: 36px 0 0; padding-right: 150px; font-size: 17px; line-height: 20px; color: #ffffff; }
/* Sitedeki erişilebilirlik aracını açan buton */
#page-accessibility .open-tool { margin-top: 34px; display: inline-flex; align-items: center; gap: 14px; padding: 8px 22px 8px 8px; border: 0; border-radius: 999px; background: rgb(19, 19, 19); box-shadow: inset 0 0 0 1px rgb(45, 45, 45); color: #ffffff; font: inherit; font-weight: 500; font-size: 17px; line-height: 1; cursor: pointer; transition: background-color .3s ease, box-shadow .3s ease; }
#page-accessibility .open-tool .ic { position: static; width: 48px; height: 48px; border-radius: 50%; background: rgb(72, 218, 120); box-shadow: 0 0 22px rgba(78, 221, 129, 0.45); display: flex; align-items: center; justify-content: center; flex: none; }
#page-accessibility .open-tool .ic svg { width: 24px; height: 24px; stroke: #0a0a0a; }
#page-accessibility .open-tool .arr { transition: transform .3s ease; }
#page-accessibility .open-tool:hover { background: rgb(26, 26, 26); box-shadow: inset 0 0 0 1px rgb(72, 218, 120); }
#page-accessibility .open-tool:hover .arr { transform: translateX(4px); }
#page-accessibility .open-tool:focus-visible { outline: 2px solid rgb(117, 255, 165); outline-offset: 3px; }

/* ---------- 3) Özellik anlatımı ---------- */
#page-accessibility .feats-area { position: relative; height: 590vh; background: var(--a11y-bg); }
#page-accessibility .feats-area > .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#page-accessibility .feat { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
#page-accessibility .feat.is-on { opacity: 1; }
#page-accessibility .feat .txt { position: absolute; left: 7.002%; top: clamp(120px, 16vh, 190px); width: min(560px, 42%); transform: translateY(18px); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
#page-accessibility .feat.is-on .txt { transform: none; }
#page-accessibility .feat .no { font-weight: 700; font-size: 12px; line-height: 12px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45); }
#page-accessibility .feat h3 { margin: 18px 0 0; font-weight: 500; font-size: clamp(28px, 2.08vw, 40px); line-height: 1.06; letter-spacing: -0.02em; color: #ffffff; text-wrap: pretty; }
#page-accessibility .feat p { margin: 26px 0 0; max-width: 560px; font-size: 17px; line-height: 23px; color: rgba(255, 255, 255, 0.72); text-wrap: pretty; }
#page-accessibility .fcard { position: absolute; left: 74%; top: 50%; width: min(420px, 36vw, 56vh); transform: translate(-50%, -50%) scale(.94); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
#page-accessibility .feat.is-on .fcard { transform: translate(-50%, -50%) scale(1); }
#page-accessibility .tile.big { width: 100%; aspect-ratio: 1 / 1; box-shadow: inset 0 0 0 1px rgb(40, 40, 40); }
#page-accessibility .tile.big .lb { top: 46cqw; }
#page-accessibility .tile.big .cb-sub { position: absolute; left: 15.6cqw; top: 60.5cqw; font-family: 'Eudoxus Sans', var(--font); font-size: 5cqw; color: rgba(255, 255, 255, 0.5); }
#page-accessibility .tile.big .cb-row { position: absolute; left: 6cqw; right: 6cqw; top: 70cqw; display: flex; justify-content: space-between; }
#page-accessibility .tile.big .cb { width: 25cqw; height: 25cqw; border-radius: 50%; background: rgb(26, 26, 26); display: flex; align-items: center; justify-content: center; }
#page-accessibility .tile.big .cb.is-sel { box-shadow: inset 0 0 0 0.5cqw #ffffff; }
#page-accessibility .tile.big .cb > span { width: 14cqw; height: 14cqw; border-radius: 50%; }
#page-accessibility .sw-p { background: linear-gradient(135deg, rgb(193, 180, 0) 50%, rgb(232, 219, 0) 50%); }
#page-accessibility .sw-d { background: linear-gradient(135deg, rgb(217, 142, 0) 50%, rgb(246, 217, 86) 50%); }
#page-accessibility .sw-t { background: linear-gradient(135deg, rgb(255, 0, 0) 50%, rgb(0, 227, 225) 50%); }
#page-accessibility .feats-area .cta { position: absolute; right: 7.002%; bottom: clamp(40px, 9vh, 110px); z-index: 2; height: 60px; border-radius: 64px; box-shadow: inset 0 0 0 1px #ffffff; padding: 0 44px; display: inline-flex; align-items: center; font-size: 17px; line-height: 20px; white-space: nowrap; color: #ffffff; transition: background-color .45s cubic-bezier(.16, 1, .3, 1), color .45s cubic-bezier(.16, 1, .3, 1); }
#page-accessibility .feats-area .cta:hover { background-color: #ffffff; color: #151515; }
#page-accessibility .progress { position: absolute; left: 7.002%; bottom: clamp(44px, 9.5vh, 114px); z-index: 2; display: flex; gap: 8px; }
#page-accessibility .progress span { width: 22px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); transition: background-color .4s ease; }
#page-accessibility .progress span.is-on { background: rgba(255, 255, 255, 0.9); }

/* Küçük ekranlarda sahne orantılı küçülür, metin daha dar alana göre ayarlanır. */
/* Tablet: ikinci bölümde metin panel görselinin (layer-2) üstüne binmesin. Yatayda görsel sağa
   kayar ve küçülür; dikeyde metnin altına iner. */
@media (max-width: 1200px) and (min-width: 761px) and (orientation: landscape) {
    #page-accessibility .tool-area .texts { width: 440px; }
    #page-accessibility .tool-area .texts p { padding-right: 0; }
    #page-accessibility .tool-area .bg { left: 63%; width: min(1355px, calc(80vh * 1355 / 1194)); }
}
@media (max-width: 1200px) and (min-width: 761px) and (orientation: portrait) {
    #page-accessibility .tool-area .texts p { padding-right: 0; }
    #page-accessibility .tool-area .bg { top: 67%; width: min(115vw, calc(58vh * 1355 / 1194)); }
}
@media (max-width: 1200px) and (min-width: 761px) {
    #page-accessibility .hero-area .mid { zoom: .8; }
}
@media (max-width: 760px) {
    #page-accessibility .hero-area .mid { zoom: .56; }
    #page-accessibility .hero-area .texts { bottom: clamp(48px, 8vh, 90px); }
    #page-accessibility .hero-area .texts h1 { font-size: 26px; line-height: 1.05; }
    #page-accessibility .tool-area .texts { top: 110px; }
    #page-accessibility .tool-area .texts h2 { font-size: 26px; line-height: 1.05; }
    #page-accessibility .tool-area .texts p { margin-top: 20px; padding-right: 0; font-size: 16px; line-height: 1.35; }
    #page-accessibility .tool-area .bg { top: 69%; width: min(125vw, calc(54vh * 1355 / 1194)); }
    #page-accessibility .open-tool { font-size: 16px; }
}

/* Mobil özellik alanı: katman dikey akışta (metin üstte, kart kalan boşlukta ortalı); altta sırayla
   ilerleme çizgileri ve tam genişlik buton. Hiçbir öğe diğerinin üstüne binmez. */
@media (max-width: 900px) {
    #page-accessibility .feat { display: flex; flex-direction: column; padding: clamp(104px, 14vh, 140px) 7.002% calc(clamp(20px, 3.5vh, 32px) + 52px + 44px); box-sizing: border-box; }
    #page-accessibility .feat .txt { position: static; width: auto; flex: none; }
    #page-accessibility .feat h3 { margin-top: 14px; font-size: clamp(22px, 6.4vw, 28px); }
    #page-accessibility .feat p { margin-top: 14px; font-size: 15px; line-height: 21px; }
    #page-accessibility .fcard { position: static; flex: none; margin: auto; width: min(280px, 62vw, 26vh); transform: scale(.94); }
    #page-accessibility .feat.is-on .fcard { transform: scale(1); }
    #page-accessibility .feats-area .cta { left: 7.002%; right: 7.002%; bottom: clamp(20px, 3.5vh, 32px); height: 52px; padding: 0 20px; justify-content: center; font-size: 16px; }
    #page-accessibility .progress { bottom: calc(clamp(20px, 3.5vh, 32px) + 52px + 20px); }
}

@media (prefers-reduced-motion: reduce) {
    #page-accessibility .feat, #page-accessibility .feat .txt, #page-accessibility .fcard { transition: none; }
}