/* =========================================================================== PUCKS — Paylaşılan tasarım sistemi (iç sayfalar) index.html'in görsel diliyle birebir; çoklu sayfa için ayrı dosyaya çıkarıldı. =========================================================================== */ :root{ /* Kontrast notu (WCAG 2.1 AA, 6 Agu 2026 olcumu): --mut #6b6b70 -> beyaz 5,30:1 · --soft 5,41:1 (eski #8a8a90: 3,43 / 3,21 ✗) --ink2 #5f5f66 -> beyaz 6,26:1 (eski #454549 koyu zeminde 2,06 ✗) --red #d21f15 -> beyaz metin 5,03:1 (eski #e8281e: 4,42 ✗) Bu uc degeri degistirirken oranlari yeniden olc. */ --bg:#ffffff; --ink:#0b0b0d; --ink2:#5f5f66; --mut:#6b6b70; --line:#ececec; --red:#d21f15; --red2:#a81810; --soft:#f7f7f8; /* Koyu zemin uzerinde okunan ikincil metin (WHITE bg degil). */ --ink2-on-dark:#a6a6ad; /* Tek bir kirmizi hem beyaz hem siyah zeminde AA gecemiyor: #d21f15 beyazda 5,32 ama #0b0b0d uzerinde 3,70 ✗ #ef4136 #0b0b0d uzerinde 5,13 ✓ ama beyazda 3,83 ✗ Bu yuzden koyu bolumler icin ayri bir kirmizi tutuyoruz. */ --red-on-dark:#ef4136; --disp:'Anton',"Arial Narrow",Impact,sans-serif; --body:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif; --mono:'Space Mono',"Courier New",monospace; --shadow:0 18px 50px -18px rgba(0,0,0,.22); --shadow-sm:0 8px 26px -10px rgba(0,0,0,.18); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} .wrap{max-width:1200px;margin:0 auto;padding:0 24px} a{color:inherit;text-decoration:none} .mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase} .red{color:var(--red)} /* NAV */ nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px} .logo{font-family:var(--disp);font-size:26px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:9px;line-height:1} .logo .pill{width:26px;height:26px;flex:0 0 auto;border-radius:6px;background:url(/assets/favicon.svg) center/contain no-repeat;position:relative;top:-1px} .navlinks{display:flex;gap:28px;font-size:14px;font-weight:500;color:var(--ink2)} .navlinks a:hover{color:var(--ink)} .navlinks a.active{color:var(--red)} .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding:11px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.18s;font-family:var(--body)} .btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red2)} .btn-out{background:#fff;border-color:var(--ink);color:var(--ink)}.btn-out:hover{background:var(--ink);color:#fff} .btn-ghost{background:var(--soft);color:var(--ink)}.btn-ghost:hover{background:#ececed} @media(max-width:760px){.navlinks{display:none}} /* SECTION + headings */ section{padding:72px 0} .kick{font-family:var(--mono);color:var(--red);margin-bottom:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase} .kick::before{content:"— "} h1,h2,h3,h4{letter-spacing:-.01em} h2{font-family:var(--disp);font-size:clamp(36px,5.5vw,64px);line-height:1.16;margin:0 0 16px;text-transform:uppercase} .sechead{max-width:680px;margin-bottom:14px} .sechead p{font-size:17px;color:var(--ink2);margin:0} /* BREADCRUMB */ .crumb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:22px 0 0} .crumb a{color:var(--mut)}.crumb a:hover{color:var(--red)} .crumb span{color:var(--ink)} /* ===== ÖZELLİK DETAY HERO ===== */ .fhero{padding:34px 0 14px} .fhero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .fhero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);color:var(--red);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px} .fhero .eyebrow::before{content:"";width:26px;height:2px;background:var(--red)} /* =========================================================================== TURKCE AKSANLAR VE SATIR YUKSEKLIGI — 8 Agu 2026 Anton'da buyuk harflerin murekkep yuksekligi: aksansiz (PUCKS, TEK TEK) -> 0.86em aksanli (İ Ü Ö Ç Ğ) -> 1.06-1.08em Yani noktalar/umlautlar harflerin tepesine 0.20em ekliyor. Basliklar line-height:.9 ile dizilmisti; Ingilizce metinde sorun cikmiyordu ama Turkcede: /ozellikler "TEK TEK / HEPSİ" -> İ'nin noktasi ust satirin icine 16 px girdi /guncelleme "GÜNCELLE" -> Ü'nun noktalari ust etikete bindi /gelistirici "KENDİ / EKRANINI" -> ayni sekilde Bu yuzden Anton ile dizilen basliklarda line-height en az 1.08 OLMALI. Daraltmadan once yukaridaki olcumu tekrarla. =========================================================================== */ .fhero h1{font-family:var(--disp);font-size:clamp(56px,9vw,108px);line-height:1.08;margin:0;text-transform:uppercase} .fhero .lead{font-size:clamp(18px,2.1vw,22px);font-weight:600;max-width:32ch;margin:20px 0 12px} .fhero .sub{font-size:16px;color:var(--ink2);max-width:46ch;margin:0 0 24px} .fhero-btns{display:flex;gap:12px;flex-wrap:wrap} .fdev{background:#000;border:6px solid #0b0b0d;border-radius:30px;overflow:hidden;aspect-ratio:1/1;max-width:360px;width:100%;margin-left:auto;box-shadow:var(--shadow);position:relative} .fdev>svg,.fdev>*{width:100%;height:100%;display:block} .fdev-icon{background:var(--red);display:flex;align-items:center;justify-content:center} .fdev-icon svg{width:46%;height:46%;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} @media(max-width:860px){.fhero-grid{grid-template-columns:1fr;gap:26px}.fdev{margin:0 auto;max-width:300px}} /* INTRO + body copy */ .prose{max-width:760px} .prose p{font-size:17px;color:var(--ink2);margin:0 0 16px;line-height:1.7} .prose p strong{color:var(--ink)} /* TICKS (nasıl çalışır) */ .ticks{list-style:none;padding:0;margin:18px 0 0;max-width:760px} .ticks li{position:relative;padding-left:30px;margin-bottom:14px;font-size:16px;color:var(--ink2);line-height:1.6} .ticks li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;border:2px solid var(--red)} .ticks li::after{content:"";position:absolute;left:5px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--red)} .ticks li strong{color:var(--ink)} /* TIP cards */ .tipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} .tip{border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:#fff} .tip .n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--red)} .tip p{font-size:14.5px;color:var(--ink2);margin:8px 0 0;line-height:1.55} @media(max-width:760px){.tipgrid{grid-template-columns:1fr}} /* QUICK FACTS */ .facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .facts div{padding:22px 16px;border-right:1px solid var(--line)} .facts div:last-child{border-right:0} .facts .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mut);text-transform:uppercase} .facts .v{font-family:var(--disp);font-size:24px;text-transform:uppercase;margin-top:6px;line-height:1.08} @media(max-width:680px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-right:0}} /* soft band */ .band{background:var(--soft)} /* ===== HUB: tüm özellikler grid ===== */ .catblock{margin-top:44px} .catblock h3{font-family:var(--disp);font-size:26px;text-transform:uppercase;margin:0 0 4px;letter-spacing:.01em} .catblock .cdesc{font-size:14px;color:var(--mut);margin:0 0 18px} .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.fgrid{grid-template-columns:1fr}} .fcardlink{display:block;border:1px solid var(--line);border-radius:20px;padding:24px;background:#fff;transition:.22s;position:relative;overflow:hidden} .fcardlink:hover{box-shadow:var(--shadow-sm);transform:translateY(-4px);border-color:#e0e0e2} .fcardlink .ic{width:50px;height:50px;border-radius:13px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--red);margin-bottom:16px;transition:.22s} .fcardlink:hover .ic{background:var(--red);color:#fff} .fcardlink .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fcardlink .ct{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--mut)} .fcardlink h4{font-family:var(--disp);font-size:26px;text-transform:uppercase;margin:4px 0 8px;line-height:1.08} .fcardlink p{font-size:14px;color:var(--ink2);margin:0;line-height:1.5} .fcardlink .go{position:absolute;top:24px;right:24px;color:var(--mut);transition:.22s;transform:translateX(-4px);opacity:0} .fcardlink:hover .go{opacity:1;transform:translateX(0);color:var(--red)} /* related strip */ .related{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px} @media(max-width:760px){.related{grid-template-columns:1fr 1fr}} .rel{border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff;transition:.2s} .rel:hover{background:var(--soft);transform:translateY(-3px)} .rel .ic{width:38px;height:38px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--red);margin-bottom:12px} .rel .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .rel .nm{font-family:var(--disp);font-size:18px;text-transform:uppercase;line-height:1.08} /* CTA band */ .ctaband{background:var(--ink);color:#fff;border-radius:30px;padding:60px 44px;text-align:center;position:relative;overflow:hidden} .ctaband::before{content:"パックス";position:absolute;font-family:var(--mono);font-size:200px;color:rgba(255,255,255,.04);right:-20px;top:-40px;letter-spacing:.1em;pointer-events:none} .ctaband h2{color:#fff;position:relative} .ctaband p{color:#b9b9bf;max-width:46ch;margin:0 auto 24px;position:relative} .ctaband .herobtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative} /* FOOTER */ footer{border-top:1px solid var(--line);padding:40px 0 56px;margin-top:10px} .footrow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center} .footrow .mono{color:var(--mut)} /* entrance animation */ @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} .rise{animation:rise .5s cubic-bezier(.2,.8,.3,1) both} .rise.d1{animation-delay:.05s}.rise.d2{animation-delay:.1s}.rise.d3{animation-delay:.15s}.rise.d4{animation-delay:.2s} /* =========================================================================== GELİŞTİRİCİ DOKÜMANLARI (saat yüzü + eklenti rehberleri) =========================================================================== */ .docbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin:6px 0 4px} .doctabs{display:flex;gap:8px;flex-wrap:wrap} .doctabs a{font-weight:600;font-size:13px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);color:var(--ink2)} .doctabs a:hover{border-color:var(--red);color:var(--red)} .doctabs a.active{background:var(--ink);color:#fff;border-color:var(--ink)} .langtoggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:0 0 auto} .langtoggle button{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.04em;padding:8px 15px;border:0;background:#fff;color:var(--ink2);cursor:pointer;transition:.15s} .langtoggle button.on{background:var(--red);color:#fff} .docwrap{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start;margin-top:18px} .toc{position:sticky;top:84px;font-size:13.5px} .toc .tt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;margin-bottom:10px} .toc a{display:block;padding:6px 10px;border-radius:8px;color:var(--ink2);border-left:2px solid var(--line);margin-bottom:2px} .toc a:hover{color:var(--red);border-left-color:var(--red);background:var(--soft)} .doc{min-width:0} .doc h2{font-family:var(--disp);font-size:clamp(26px,3.2vw,38px);text-transform:uppercase;margin:40px 0 14px;scroll-margin-top:84px;line-height:1.08} .doc h2:first-of-type{margin-top:8px} .doc h3{font-family:var(--disp);font-size:21px;text-transform:uppercase;margin:26px 0 10px;scroll-margin-top:84px} .doc p{font-size:15.5px;color:var(--ink2);line-height:1.7;margin:0 0 14px} .doc ul{margin:0 0 16px;padding-left:22px} .doc li{font-size:15px;color:var(--ink2);line-height:1.6;margin-bottom:6px} .doc code,.dtable code{font-family:var(--mono);font-size:12.5px;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)} .doc pre{background:#0b0b0d;color:#e8e8ea;border-radius:14px;padding:18px 20px;overflow-x:auto;margin:0 0 18px} .doc pre code{font-family:var(--mono);font-size:12.5px;line-height:1.65;background:none;border:0;padding:0;color:#e8e8ea;white-space:pre} .dtable{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:13.5px} .dtable th,.dtable td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top} .dtable th{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)} .dtable td:first-child code{white-space:nowrap} .callout{border:1px solid var(--line);border-left:3px solid var(--red);background:var(--soft);border-radius:12px;padding:15px 18px;margin:0 0 18px;font-size:14px;color:var(--ink2);line-height:1.65} .callout b{color:var(--ink)} .lead-doc{font-size:17px;color:var(--ink2);max-width:64ch;line-height:1.65} /* EN/TR dil değiştirme: varsayılan TR; html.lang-en EN'i gösterir */ .en{display:none} html.lang-en .en{display:revert} html.lang-en .tr{display:none} /* Kod bloğu kopyalama butonu (sağ üst köşe) */ .doc pre, .codepeek pre{position:relative} .copybtn{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#cfcfd4;cursor:pointer;padding:0;z-index:3;transition:.15s} .copybtn:hover{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.32)} .copybtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .copybtn.done{color:#34c759;border-color:#34c759;background:rgba(52,199,89,.12)} .codepeek .cp pre{padding-top:14px} /* JSON sözdizimi vurgulama */ .doc pre code .t-key{color:#7fd3ff} .doc pre code .t-str{color:#ffd27f} .doc pre code .t-num{color:#b6f09c} .doc pre code .t-bool{color:#ff8a7a} /* Navbar dil değiştirme */ .navright{display:flex;align-items:center;gap:14px} .nav-lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden} .nav-lang button{font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.03em;padding:6px 11px;border:0;background:#fff;color:var(--mut);cursor:pointer;transition:.15s} .nav-lang button.on{background:var(--ink);color:#fff} .nav-lang button:hover{color:var(--ink)} .nav-lang button.on:hover{color:#fff} /* MD indirme + yapay zeka kutusu (geliştirici) */ .aibox{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:linear-gradient(180deg,#fff,#fbfbfc);margin:6px 0 6px;box-shadow:var(--shadow-sm)} .aibox .ai-ic{width:54px;height:54px;border-radius:14px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center} .aibox .ai-ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .aibox h3{font-family:var(--disp);font-size:22px;text-transform:uppercase;margin:0 0 4px} .aibox p{font-size:14px;color:var(--ink2);margin:0 0 12px;line-height:1.55} .aibox .dls{display:flex;gap:10px;flex-wrap:wrap} .aibox .dl{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:10px;padding:9px 14px;color:var(--ink);transition:.18s} .aibox .dl:hover{border-color:var(--red);color:var(--red)} .aibox .dl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} @media(max-width:600px){.aibox{grid-template-columns:1fr}} /* Geliştirici giriş: ETKİLEŞİMLİ split-hero (hover ile genişler) */ .splithero{display:flex;width:100%;height:440px;border-radius:24px;overflow:hidden;margin-top:24px;border:1px solid #1c1c22;background:#0b0b0d} .shalf{position:relative;width:50%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:#fff;overflow:hidden;padding:34px;transform:translateZ(0);will-change:width;transition:width .85s cubic-bezier(.16,1,.3,1)} .splithero:hover .shalf{width:38%} .splithero .shalf:hover{width:62%} .shalf .shbg{position:absolute;inset:0;z-index:1;filter:brightness(.42) saturate(.9);transform:scale(1);transition:transform 1.25s cubic-bezier(.16,1,.3,1),filter 1.25s ease} .shalf .shbg svg{width:100%;height:100%;display:block} .shalf:hover .shbg{filter:brightness(.72) saturate(1);transform:scale(1.08)} .shalf::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,13,.1),rgba(11,11,13,.85))} .shalf .shinner{position:relative;z-index:2;pointer-events:none;transform:translateY(12px);opacity:.78;transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .95s ease} .shalf:hover .shinner{transform:translateY(0);opacity:1} .shalf .shtag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#fff;opacity:.72;margin-bottom:8px} .shalf h2{font-family:var(--disp);font-size:clamp(28px,4.2vw,48px);text-transform:uppercase;line-height:1.08;margin:0 0 10px;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.6)} .shalf p{font-size:14px;line-height:1.55;color:#d8d8dc;max-width:34ch;margin:0 0 16px} .shalf .shgo{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:#fff;background:var(--red);border-radius:999px;padding:10px 18px;align-self:flex-start} @media(max-width:760px){.splithero{flex-direction:column;height:auto}.shalf{width:100%!important;min-height:280px}.shalf .shinner{opacity:1;transform:none}} /* Geliştirici: hızlı kod bakışı (vurgulu) */ .codepeek{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px} .codepeek .cp{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0b0b0d} .codepeek .cph{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #1c1c22} .codepeek .cph .nm{font-family:var(--mono);font-size:12px;color:#e8e8ea} .codepeek .cph .dot{width:9px;height:9px;border-radius:50%;background:var(--red)} .codepeek pre{margin:0;border-radius:0;background:#0b0b0d} .codepeek pre code{font-family:var(--mono);font-size:12px;line-height:1.6;color:#e8e8ea} .codepeek pre code .t-key{color:#7fd3ff}.codepeek pre code .t-str{color:#ffd27f}.codepeek pre code .t-num{color:#b6f09c}.codepeek pre code .t-bool{color:#ff8a7a} @media(max-width:760px){.codepeek{grid-template-columns:1fr}} /* İndirme buton grubu — sayfa gövdesinde (aibox dışında) da kullanılabilir */ .dls{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .dl{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;border:1px solid var(--line);border-radius:12px;padding:13px 20px;background:#fff;color:var(--ink);transition:.18s} .dl:hover{border-color:var(--red);color:var(--red);box-shadow:var(--shadow-sm);transform:translateY(-2px)} .dl svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} /* Masaüstü yardımcı uygulama kartları (eklenti sayfası) */ .helpergrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px} .helper{border:1px solid var(--line);border-radius:20px;padding:26px;background:#fff;transition:.2s;display:flex;flex-direction:column} .helper:hover{box-shadow:var(--shadow-sm);transform:translateY(-4px)} .helper .hic{width:52px;height:52px;border-radius:14px;background:var(--soft);color:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .helper .hic svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .helper h4{font-family:var(--disp);font-size:24px;text-transform:uppercase;margin:0 0 4px;line-height:1.08} .helper .hos{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;margin-bottom:10px} .helper p{font-size:14px;color:var(--ink2);margin:0 0 18px;line-height:1.55;flex:1} .helper .dl{margin-top:auto;align-self:flex-start} @media(max-width:680px){.helpergrid{grid-template-columns:1fr}} /* Mobil navigasyon (hamburger) */ .navtoggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;flex:0 0 auto} .navtoggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s} .navtoggle.on span:nth-child(1){transform:translateY(6px) rotate(45deg)} .navtoggle.on span:nth-child(2){opacity:0} .navtoggle.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* yatay taşma koruması (mobil) */ html,body{overflow-x:hidden;max-width:100%} @media(max-width:860px){.docwrap{grid-template-columns:1fr;gap:24px}.toc{position:static;display:none}} @media(max-width:760px){ .navtoggle{display:flex} nav .wrap{position:relative} .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);flex-direction:column;gap:0;padding:6px 0;z-index:70} .navlinks.open{display:flex} .navlinks a{padding:13px 24px;font-size:15px} .navright{gap:9px} /* mobilde geniş tablolar yatay kaydırılır */ .doc .dtable{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} } @media(max-width:430px){ .navright .btn{display:none} } /* =========================================================================== ERISILEBILIRLIK — 7 Agu 2026 site denetimi sonrasi eklendi. Asagidaki bloklari kaldirmadan once denetim raporunun EK-2/EK-5/EK-9/EK-11 maddelerini oku; hepsi olculmus WCAG hatalarini kapatiyor. =========================================================================== */ /* EK-2 — Klavye odagi. Sitede hic :focus kurali yoktu; klavye kullanicisi nerede oldugunu goremiyordu (WCAG 2.4.7 AA). Cift halka (koyu + beyaz) hem acik hem kirmizi zeminde gorunur kalir. */ :focus-visible{ outline:3px solid var(--ink); outline-offset:2px; border-radius:4px; } .btn-red:focus-visible, .nav-lang button.on:focus-visible{ outline-color:#fff; box-shadow:0 0 0 5px var(--ink); } /* Fare tiklamasinda halka cikmasin (tarayici :focus-visible ile zaten ayirir). */ :focus:not(:focus-visible){outline:none} /* EK-9 — "Icerige atla" baglantisi. Odaklanana kadar gorunmez. */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0; font-weight:700;font-size:14px; } .skip-link:focus{left:0} /* EK-11 — Dokunma hedefleri. Footer'daki yasal baglantilar 16 px yuksekligindeydi; WCAG 2.5.8 asgari 24x24 px ister. */ .footrow .mono a{display:inline-block;padding:8px 4px;min-height:24px} .nav-lang button{min-height:32px;min-width:44px} /* EK-14 — Hareket azaltma tercihi. Otomatik donen karusel ve gecisler sistem ayarina saygi duyar. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html{scroll-behavior:auto} } /* Gorsel olarak gizli, ekran okuyucuya acik. Placeholder etiket yerine gecmedigi icin (WCAG 3.3.2) gorunur duzeni bozmadan gercek