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

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