/*! © 2026 Sinan Sarıtaş · sinansaritas.com — Tüm hakları saklıdır. İzinsiz kopyalanamaz, çoğaltılamaz ve kullanılamaz. */
/*! © 2026 sinansaritas.com — Tüm hakları saklıdır. */
/* sinansaritas.com — ortak ölçme aletleri ve ders araçları (SSAlet 1.0). Tek kaynak: site/ortak/; SS Geometri ve SS Çekirdek'e kopyalanır. */
.ssal-aralar [hidden],.ssal-ara[hidden]{display:none!important}
.ssal-ara *{box-sizing:border-box}
.ssal-ara button{font:inherit;color:inherit;cursor:pointer}
.ssal-ara{font:14px/1.45 Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ssal-yazi,#1c2533)}
.ssal-ara svg{display:block}
.ssal-etiket{font-size:13.5px;font-weight:700;fill:#1c2533;paint-order:stroke;stroke:#fff;stroke-width:4px;pointer-events:none}
/* ---------- ölçme aletleri (şeffaf, vektör) ---------- */
.ssal-govde{stroke-width:1.4;stroke-linejoin:round;cursor:grab}
.ssal-cetvel .ssal-govde{fill:rgba(165,216,255,.42);stroke:#3b82c4}
.ssal-gonye45 .ssal-govde{fill:rgba(208,191,255,.45);stroke:#7c5cc4}
.ssal-gonye30 .ssal-govde{fill:rgba(252,194,215,.48);stroke:#c2477a}
.ssal-iletki .ssal-govde{fill:rgba(255,224,102,.4);stroke:#b08900}
.ssal-cizgi{stroke:#1c2533;stroke-width:1;fill:none;pointer-events:none}
.ssal-yazi{font-size:10.5px;font-weight:600;fill:#1c2533;pointer-events:none}
.ssal-kucuk{font-size:9.5px;fill:#5b6678}
.ssal-ters{font-size:8.5px;fill:#b3261e}
.ssal-aci{font-size:12px;fill:#5b2a86}
.ssal-dilim{fill:rgba(214,111,28,.18);stroke:none;pointer-events:none}
.ssal-ibre{stroke:#d66f1c;stroke-width:2.4;pointer-events:none}
.ssal-okuma{font-size:15px;font-weight:700;fill:#b35c00;paint-order:stroke;stroke:#fff;stroke-width:4px;pointer-events:none}
.ssal-merkez{fill:#d66f1c;pointer-events:none}
.ssal-tut{cursor:pointer}
.ssal-tut circle{fill:#fff;stroke:#1c2533;stroke-width:1.6;fill-opacity:.92}
.ssal-tut path{fill:none;stroke:#1c2533;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ssal-tut-sil circle{stroke:#d1242f}.ssal-tut-sil path{stroke:#d1242f}
.ssal-tut-don circle,.ssal-tut-kol circle{fill:#fff4e8;stroke:#b35c00}.ssal-tut-don path,.ssal-tut-kol path{stroke:#b35c00}
.ssal-tut-okuma circle{fill:#d66f1c;stroke:#fff;stroke-width:2.5}
.ssal-tut-igne circle,.ssal-tut-uc circle{fill:rgba(255,255,255,.01);stroke:#1c2533;stroke-dasharray:3 3}
.ssal-pergel-bacak{stroke:#2f3a48;stroke-width:7;stroke-linecap:round;cursor:grab}
.ssal-pergel-sap{stroke:#2f3a48;stroke-width:5;stroke-linecap:round;pointer-events:none}
.ssal-pergel-mafsal{fill:url(#ssal-metal-r);stroke:#3f4753;stroke-width:1.2;cursor:grab}
.ssal-pergel-igne{fill:#1c2533}.ssal-pergel-uc{fill:#d1242f;stroke:#fff;stroke-width:1.5}
.ssal-pergel-acik{stroke:#b35c00;stroke-width:1.4;stroke-dasharray:4 5;pointer-events:none}
.ssal-yay-on{fill:none;stroke:#b35c00;stroke-width:3;stroke-linecap:round}
/* ---------- sınıf araçları pencereleri ---------- */
.ssal-aralar{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.ssal-ara{position:absolute;pointer-events:auto;width:300px;max-width:calc(100% - 20px);background:#fff;border:1px solid var(--ssal-kenar,#dfe4ec);border-radius:16px;box-shadow:0 14px 36px rgba(15,23,42,.2);overflow:hidden}
.ssal-ara>header{display:flex;align-items:center;justify-content:space-between;padding:7px 8px 7px 13px;background:#1c2533;color:#fff;cursor:move;touch-action:none;user-select:none}
.ssal-ara>header b{font-size:13.5px}
.ssal-ara>header button{border:0;background:rgba(255,255,255,.14);color:#fff!important;width:28px;height:28px;border-radius:8px;font-size:17px;line-height:1}
.ssal-ara-govde{padding:10px 12px 12px}
.ssal-is,.ssal-sec{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.ssal-is button,.ssal-sec button,.ssal-say button{border:1px solid var(--ssal-kenar,#dfe4ec);background:#fff;border-radius:9px;padding:6px 10px;font-weight:600;font-size:13px}
.ssal-is button.ana{background:#d66f1c;border-color:#d66f1c;color:#fff!important}
.ssal-sec button.on{background:#1c2533;border-color:#1c2533;color:#fff!important}
.ssal-say{display:inline-flex;align-items:center;gap:5px;font-size:13px}.ssal-say button{padding:4px 9px}
.ssal-sik{display:flex;align-items:flex-end;gap:4px;height:120px;padding:18px 2px 0;border-bottom:1px solid var(--ssal-kenar,#dfe4ec)}
.ssal-sik>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;position:relative}
.ssal-sik span{width:100%;max-width:34px;background:linear-gradient(#f0a35b,#d66f1c);border-radius:6px 6px 0 0;min-height:2px;transition:height .25s}
.ssal-sik i{font-style:normal;font-size:11px;font-weight:700;color:var(--ssal-soluk,#5b6678)}
.ssal-sik b{font-size:11.5px;margin-top:3px;position:absolute;bottom:-18px;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}
.ssal-sik small{position:absolute;bottom:-33px;font-size:10px;color:var(--ssal-soluk,#5b6678)}
.ssal-sik-not{margin:40px 0 0;font-size:11.5px;color:var(--ssal-soluk,#5b6678)}
.ssal-zarlar{display:flex;align-items:center;justify-content:center;gap:10px;min-height:76px}
.ssal-zar{width:64px;height:64px}.ssal-zar rect{fill:#fff;stroke:#1c2533;stroke-width:2.5}.ssal-zar circle{fill:#1c2533}
.ssal-salla .ssal-zar{animation:ssalSalla .14s linear infinite}
@keyframes ssalSalla{0%{transform:rotate(-14deg) translateY(-3px)}50%{transform:rotate(12deg)}100%{transform:rotate(-14deg) translateY(2px)}}
.ssal-zar-top{font-size:22px}
.ssal-para-yer{display:flex;justify-content:center;perspective:400px}
.ssal-para{display:flex;flex-direction:column;align-items:center;gap:4px}
.ssal-para svg{width:84px;height:84px}.ssal-para circle{fill:#f2c94c;stroke:#a77d10;stroke-width:3}.ssal-para circle.ic{fill:none;stroke:#c99a1d;stroke-width:1.5;stroke-dasharray:3 3}.ssal-para text{font-size:30px;font-weight:800;fill:#7a5a07}
.ssal-dondu svg{animation:ssalPara .42s ease-in-out}
@keyframes ssalPara{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(540deg) translateY(-20px)}100%{transform:rotateY(1080deg) translateY(0)}}
.ssal-cark-yer{display:flex;justify-content:center}
.ssal-cark{width:220px;height:228px}
.ssal-cark-don{transition:transform 3.4s cubic-bezier(.12,.75,.15,1);transform-origin:0 0}
.ssal-cark-don path{stroke:#fff;stroke-width:2}.ssal-cark-don text{font-size:13px;font-weight:700;fill:#1c2533}
.ssal-cark-ok{fill:#1c2533}.ssal-cark-orta{fill:#fff;stroke:#1c2533;stroke-width:3}
.ssal-cark-et{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ssal-soluk,#5b6678)}
.ssal-cark-et input{border:1px solid var(--ssal-kenar,#dfe4ec);border-radius:8px;padding:6px 8px;font:inherit;color:var(--ssal-yazi,#1c2533)}
.ssal-cark-sonuc{margin:6px 0 0;font-weight:700;min-height:1.2em}
.ssal-zm{position:relative;width:170px;height:170px;margin:4px auto}
.ssal-zm svg{width:100%;height:100%}.ssal-zm .iz{fill:none;stroke:#eef1f6;stroke-width:9}.ssal-zm .dolu{fill:none;stroke:#d66f1c;stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .2s linear}
.ssal-zm-ekran{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;font-variant-numeric:tabular-nums}
.ssal-bitti{animation:ssalBitti .5s 6 alternate}
@keyframes ssalBitti{to{box-shadow:0 0 0 6px #d1242f}}
.ssal-kr-ekran{display:block;text-align:center;font-size:40px;font-variant-numeric:tabular-nums;margin:6px 0}
.ssal-kr-tur{max-height:140px;overflow:auto;margin:0;padding-left:18px;font-size:13px}.ssal-kr-tur small{color:var(--ssal-soluk,#5b6678)}
.ssal-hm-gecmis{min-height:18px;font-size:12px;color:var(--ssal-soluk,#5b6678);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssal-hm-ekran{width:100%;border:1px solid var(--ssal-kenar,#dfe4ec);border-radius:10px;padding:8px 10px;font-size:24px;text-align:right;font-variant-numeric:tabular-nums;margin-bottom:8px;color:var(--ssal-yazi,#1c2533)}
.ssal-hm-tus{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ssal-hm-tus button{height:42px;border:1px solid var(--ssal-kenar,#dfe4ec);background:#f6f8fb;border-radius:10px;font-size:16px;font-weight:600}
.ssal-hm-tus button.isl{background:#eef3ff;color:#1f4fa8}.ssal-hm-tus button.ana{background:#d66f1c;border-color:#d66f1c;color:#fff!important}

.ssal-tahta .ssal-yazi{font-size:13px}.ssal-tahta .ssal-okuma{font-size:19px}.ssal-tahta .ssal-ara{width:360px}.ssal-tahta .ssal-hm-tus button{height:52px;font-size:19px}/* 1.1: birim çevirici, veri ve grafik, çarpan ağacı */
.ssal-ara-grafik,.ssal-ara-birim,.ssal-ara-carpan{width:330px}
.ssal-bc{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0}
.ssal-bc input,.ssal-bc select,.ssal-gtab input{border:1px solid var(--ssal-kenar,#dfe4ec);border-radius:8px;padding:6px 7px;font:inherit;min-width:0}
.ssal-bc input[type=number],.ssal-bg{width:96px}.ssal-bc label{display:flex;flex-direction:column;font-size:11.5px;color:var(--ssal-soluk,#5b6678)}
.ssal-bs{font-size:18px;min-width:70px;text-align:right}
.ssal-merdiven{display:flex;flex-direction:column;gap:2px;margin:8px 0}
.ssal-merdiven span{padding:3px 10px;border-radius:7px;background:#f3f5f8;font-weight:600;width:max-content}
.ssal-merdiven span:nth-child(2){margin-left:14px}.ssal-merdiven span:nth-child(3){margin-left:28px}.ssal-merdiven span:nth-child(4){margin-left:42px}.ssal-merdiven span:nth-child(5){margin-left:56px}.ssal-merdiven span:nth-child(6){margin-left:70px}.ssal-merdiven span:nth-child(7){margin-left:84px}
.ssal-merdiven .bas{background:#d66f1c;color:#fff}.ssal-merdiven .son{background:#1f6feb;color:#fff}.ssal-merdiven .ara{background:#fde7d6}
.ssal-bnot,.ssal-gist,.ssal-cs{font-size:12.5px;color:var(--ssal-yazi,#1c2533);margin:6px 0 0;line-height:1.5}
.ssal-gsvg svg{width:100%;height:auto;font-family:inherit}
.ssal-gtab{display:grid;gap:4px;margin-top:6px}.ssal-gtab div{display:grid;grid-template-columns:1fr 90px;gap:4px}
.ssal-agac svg{width:100%;height:auto}.ssal-agac line{stroke:#9aa5b1;stroke-width:1.5}.ssal-agac text{font-size:13px;font-weight:700;fill:#1c2533}.ssal-agac .kok{font-size:15px}.ssal-agac .asal{fill:#fde7d6;stroke:#d66f1c}
/* 1.2: gerçekçi görünüm — pah, parlama, gölge; pergelde metal, kalem, vida */
.ssal-pah{fill:rgba(255,255,255,.42);stroke:none;pointer-events:none}
.ssal-parla{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.ssal-ince{fill:none;stroke:rgba(28,37,51,.28);stroke-width:.8;pointer-events:none}
.ssal-marka{font-size:9px;font-weight:700;letter-spacing:.06em;opacity:.42}
.ssal-cetvel .ssal-govde{fill:rgba(170,214,247,.5);stroke:#4f8fc4}
.ssal-iletki .ssal-govde{fill:rgba(255,227,128,.5);stroke:#b08900}
.ssal-pg-metal{fill:#9aa6b4;stroke:#3f4753;stroke-width:1;stroke-linejoin:round;cursor:grab}
.ssal-pg-isik{fill:rgba(255,255,255,.75);stroke:none;pointer-events:none}
.ssal-pg-tutucu{fill:#4b5563;stroke:#1f2937;stroke-width:.8;cursor:grab}
.ssal-pg-igne{stroke:#374151;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.ssal-pg-kalem{fill:#f2b33d;stroke:#9a6a12;stroke-width:.8;cursor:grab}
.ssal-pg-kalem-yuz{stroke:rgba(255,255,255,.55);stroke-width:1.2;pointer-events:none}
.ssal-pg-ahsap{fill:#ecc89c;stroke:#a87a46;stroke-width:.7;pointer-events:none}
.ssal-pg-grafit{fill:#2b2f36;stroke:none;pointer-events:none}
.ssal-pg-vida{fill:url(#ssal-metal-r);stroke:#3f4753;stroke-width:.8;pointer-events:none}
.ssal-pg-cubuk{stroke:#6b7280;stroke-width:2;stroke-dasharray:1.5 1.2;pointer-events:none}
.ssal-pg-teker{fill:url(#ssal-metal-r);stroke:#3f4753;stroke-width:1;stroke-dasharray:2 1.2;pointer-events:none}
.ssal-pg-sap{fill:url(#ssal-sap);stroke:#111827;stroke-width:.8;pointer-events:none}
.ssal-pg-tirtil{stroke:rgba(255,255,255,.35);stroke-width:1;pointer-events:none}
.ssal-pg-yiv{stroke:#3f4753;stroke-width:1.4;stroke-linecap:round;pointer-events:none}

/* 1.3 gömülü araç (interaktif araç sayfaları) */
.ssal-ara.ssal-ara-gomulu{position:relative;width:100%;max-width:none;box-shadow:none;border-radius:18px}.ssal-ara-gomulu .ssal-ara-govde{padding:16px}
/* 1.4 Sayı Laboratuvarı pencereleri */
.ssal-ara.ssal-ara-genis{width:min(640px,calc(100% - 20px));max-height:calc(100% - 20px);overflow:auto}.ssal-ara-genis .ssal-ara-govde{padding:0}.ssal-ara-genis .msl{padding:10px}
.ssal-ara-tam{margin-left:auto;margin-right:6px;font-weight:800;text-decoration:none!important;color:inherit!important;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}.ssal-ara-tam:hover{background:rgba(0,0,0,.06)}

/* SSAlet 1.5: çarpan ağacı — büyük giriş kutuları, oklu dallar, okunaklı sonuç */
.ssal-ara-carpan .ssal-bc{gap:12px;margin:4px 0 10px}.ssal-ara-carpan .ssal-bc label{font-size:13px;font-weight:600;gap:4px}
.ssal-ara-carpan .ssal-bc input[type=number]{width:150px;font:800 24px/1.2 Poppins,system-ui,sans-serif;padding:8px 12px;border-radius:12px;border-width:1.5px}
.ssal-agac line{stroke:#64748b;stroke-width:1.8;stroke-linecap:round}.ssal-agac .uc{fill:#64748b}
.ssal-agac text{font-size:14px}.ssal-agac .kok{font-size:17px;font-weight:800}
.ssal-ara-carpan .ssal-cs{font-size:15.5px;line-height:1.65;background:#f6f9f8;border-radius:12px;padding:10px 14px}
.ssal-ara-carpan .ssal-agac svg{max-height:62vh;display:block;margin:0 auto}
:fullscreen .ssal-ara-carpan .ssal-cs,.ssia-tam-acik .ssal-ara-carpan .ssal-cs{font-size:20px}
:fullscreen .ssal-ara-carpan .ssal-bc input[type=number],.ssia-tam-acik .ssal-ara-carpan .ssal-bc input[type=number]{font-size:30px;width:190px}
.ssal-ara-carpan .ssal-bc input::placeholder{font-size:14px;font-weight:500}

/* 1.6: tahtada büyük pencere */
.ssal-ara.ssal-ara-buyuk{left:8px!important;top:8px!important;right:8px;bottom:8px;width:auto!important;max-width:none;max-height:none;overflow:auto;border-radius:14px}
.ssal-ara-buyuk>header{cursor:default;position:sticky;top:0;z-index:2}
.ssal-ara-buyuk>header b{font-size:16px}
.ssal-ara-buyuk .ssal-ara-govde{max-width:1100px;margin:0 auto}
@media (min-width:1100px){.ssal-ara-buyuk .ssal-ara-govde{zoom:1.2}}
.ssal-ara>header [data-ara-buyut]{margin-right:6px;display:inline-flex;align-items:center;justify-content:center}
.ssal-ara>header b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssal-ara>header button{padding:0!important;min-width:28px;width:28px;flex:none;display:inline-flex;align-items:center;justify-content:center}.ssal-ara>header button svg{width:16px!important;height:16px!important;flex:none;display:block}