/*! © 2026 Sinan Sarıtaş · sinansaritas.com — Tüm hakları saklıdır. İzinsiz kopyalanamaz, çoğaltılamaz ve kullanılamaz. */
#lgsHesap{container:lgs/inline-size}
#lgsHesap h2{margin:0;padding:0;border:0;font-family:inherit;line-height:1.3;text-transform:none}
#lgsHesap ul{margin:0;padding:0}#lgsHesap li{margin:0}
#lgsHesap input,#lgsHesap select,#lgsHesap button{font-family:inherit;line-height:1.2;box-shadow:none;min-height:0;text-transform:none;letter-spacing:normal}
#lgsHesap{--murekkep:#17235a;--murekkep2:#24337a;--fosfor:#ffd43b;--sozel:#e0325f;--sayisal:#1f6fe0;--soluk:#5f6784;--cizgi:#e3e7f1;--zemin:#f4f6fb;--hata:#d92d20}
#lgsHesap *,#lgsHesap{margin:0;padding:0;box-sizing:border-box}
#lgsHesap{overflow-x:hidden;max-width:100%}
#lgsHesap{font-family:"Lexend",system-ui,sans-serif;color:var(--murekkep);background:transparent;font-size:15px;line-height:1.4}
#lgsHesap button,#lgsHesap input,#lgsHesap select{font:inherit;color:inherit}
#lgsHesap :focus-visible{outline:3px solid var(--fosfor);outline-offset:2px}
#lgsHesap [hidden]{display:none!important}
#lgsHesap{width:100%;max-width:720px;margin:0 auto;padding:4px}
#lgsHesap .ust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:10px;font-size:13.5px;color:var(--soluk)}
#lgsHesap .sec{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--murekkep)}
#lgsHesap .sec select{border:1.5px solid var(--murekkep);border-radius:8px;padding:5px 8px;font-weight:700;background:#fff;cursor:pointer}
#lgsHesap .kutucuk{display:flex;align-items:center;gap:6px;cursor:pointer}
#lgsHesap .kutucuk input{width:16px;height:16px;accent-color:var(--murekkep)}
#lgsHesap #hform{position:relative;background:#fff;border:1.5px solid var(--cizgi);border-radius:14px;padding:0 0 14px 18px;overflow:hidden}
#lgsHesap #hform::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:6px;background:repeating-linear-gradient(to bottom,var(--murekkep) 0 8px,transparent 8px 20px)}
#lgsHesap .tablo{display:block}
#lgsHesap .bas,#lgsHesap .sat{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:6px;padding-right:12px}
#lgsHesap .bas{background:var(--murekkep);color:#fff;margin-left:-18px;padding:10px 12px 10px 30px;font-size:13px;font-weight:600}
#lgsHesap .bas span{text-align:center}
#lgsHesap .bas .c1{text-align:left}
#lgsHesap .sat{padding-top:7px;padding-bottom:7px;border-bottom:1px solid var(--cizgi)}
#lgsHesap .sat>.c1{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;min-width:0;padding-left:6px}
#lgsHesap .sat>.c1::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--sayisal)}
#lgsHesap .sat.sozel>.c1::before{background:var(--sozel)}
#lgsHesap .sat>span,#lgsHesap .sat>div{text-align:center;min-width:0}
#lgsHesap .soru{color:var(--soluk);font-size:14px}
#lgsHesap .sat input{width:100%;max-width:64px;height:38px;border:1.5px solid var(--cizgi);border-radius:10px;text-align:center;font-size:17px;font-weight:600;background:var(--zemin);-moz-appearance:textfield}
#lgsHesap .sat input::placeholder{color:#b6bccd}
#lgsHesap .sat input::-webkit-inner-spin-button,#lgsHesap .sat input::-webkit-outer-spin-button{-webkit-appearance:none}
#lgsHesap .sat input:focus{outline:none;border-color:var(--murekkep);background:#fff;box-shadow:0 0 0 3px rgba(255,212,59,.75)}
#lgsHesap .sat output{display:inline-block;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
#lgsHesap .sat.yanlis input{border-color:var(--hata);background:#fff2f1}
#lgsHesap .sat.muaf{display:none}
#lgsHesap .toplam{border-bottom:0;background:linear-gradient(transparent 18%,rgba(255,212,59,.55) 18% 82%,transparent 82%)}
#lgsHesap .toplam>.c1::before{display:none}
#lgsHesap .toplam>.c1,#lgsHesap .toplam>span{font-weight:800}
#lgsHesap .hatanot{color:var(--hata);font-size:13px;margin:8px 12px 0 6px}
#lgsHesap .uzun{overflow-wrap:anywhere}
#lgsHesap .kisa{display:none}
#lgsHesap .dugmeler{display:flex;gap:10px;margin:14px 12px 0 6px}
#lgsHesap .hesapla{flex:2;height:48px;border:0;border-radius:12px;background:var(--fosfor);color:var(--murekkep);font-size:17px;font-weight:800;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
#lgsHesap .hesapla:hover{filter:brightness(.97)}
#lgsHesap .temizle{flex:1;height:48px;border:1.5px solid var(--cizgi);border-radius:12px;background:#fff;font-weight:600;cursor:pointer;color:var(--soluk)}
#lgsHesap .sonuc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin-top:12px;background:var(--murekkep);color:#fff;border-radius:14px;overflow:hidden}
#lgsHesap .kutu{padding:14px 16px}
#lgsHesap .kutu+.kutu{border-left:1px solid rgba(255,255,255,.15);background:var(--murekkep2)}
#lgsHesap .et{display:block;font-size:13px;color:#c9d0f0}
#lgsHesap .kutu b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
#lgsHesap .kutu.ana b{color:var(--fosfor);font-size:38px}
#lgsHesap .dipnot{font-size:12.5px;color:var(--soluk);margin-top:8px;line-height:1.5}
#lgsHesap .okul{margin-top:16px;background:#fff;border:1.5px solid var(--cizgi);border-radius:14px;padding:12px 14px}
#lgsHesap .okul-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#lgsHesap .okul-baslik{font-size:16px;font-weight:700}
#lgsHesap .okul select{border:1.5px solid var(--murekkep);border-radius:8px;padding:6px 8px;background:#fff;font-weight:600;max-width:100%}
#lgsHesap .okullar{list-style:none;margin-top:8px;max-height:340px;overflow-y:auto;overflow-x:hidden}
#lgsHesap .okullar li{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid var(--cizgi);font-size:14px}
#lgsHesap .okullar li>div:first-child{min-width:0}
#lgsHesap .okullar li strong{font-weight:600;overflow-wrap:anywhere}
#lgsHesap .okullar li div>span{display:block;font-size:12px;color:var(--soluk)}
#lgsHesap .op{text-align:right;flex:0 0 auto;font-variant-numeric:tabular-nums}
#lgsHesap .op b{display:block}
#lgsHesap .op span{font-size:12px;color:var(--soluk)}
#lgsHesap .okullar em{font-style:normal;font-size:11px;font-weight:700;color:var(--murekkep);background:var(--fosfor);border-radius:999px;padding:1px 7px;margin-left:6px;white-space:nowrap}
#lgsHesap .okullar li.zor strong{color:var(--soluk)}
#lgsHesap .okullar li.ara{display:block;position:sticky;top:0;background:var(--zemin);font-weight:700;font-size:12.5px;padding:6px 8px;color:var(--soluk)}
#lgsHesap .okullar li.bos{display:block;color:var(--soluk);border:0}
#lgsHesap .alt{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:13px}
#lgsHesap .alt button{border:1.5px solid var(--cizgi);background:#fff;border-radius:999px;padding:5px 12px;font-weight:600;font-size:13px;cursor:pointer;margin-left:6px}
#lgsHesap #gomKutu{display:flex;gap:8px;margin-top:8px}
#lgsHesap #gomKutu textarea{flex:1;min-width:0;border:1px solid var(--cizgi);border-radius:8px;padding:6px;font:12px/1.4 monospace}
#lgsHesap #gomKutu button{border:0;background:var(--murekkep);color:#fff;border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer}
#lgsHesap #bildirim{z-index:9999;position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--murekkep);color:#fff;padding:8px 16px;border-radius:999px;font-size:13px}
@container lgs (max-width:560px){#lgsHesap .uzun{display:none}
#lgsHesap .kisa{display:inline}
#lgsHesap #hform{padding-left:14px}
#lgsHesap #hform::before{left:4px;width:5px}
#lgsHesap .bas{margin-left:-14px;padding:9px 8px 9px 22px;font-size:11.5px}
#lgsHesap .bas,#lgsHesap .sat{grid-template-columns:minmax(0,1.6fr) minmax(0,.55fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr);column-gap:4px;padding-right:6px}
#lgsHesap .sat>.c1{font-size:13px;gap:5px;padding-left:2px}
#lgsHesap .sat>.c1::before{flex-basis:6px;height:6px}
#lgsHesap .soru{font-size:13px}
#lgsHesap .sat input{height:36px;font-size:16px;border-radius:9px}
#lgsHesap .sat output{font-size:15px}
#lgsHesap .dugmeler,#lgsHesap .hatanot{margin-right:6px;margin-left:2px}
#lgsHesap .kutu{padding:12px}
#lgsHesap .kutu b{font-size:24px}
#lgsHesap .kutu.ana b{font-size:30px}
}
@media (prefers-reduced-motion:reduce){#lgsHesap *,#lgsHesap{transition:none!important}
}
#lgsHesap .bas,#lgsHesap .sat{grid-template-columns:minmax(0,1.35fr) minmax(0,2fr) minmax(0,2fr) minmax(0,.75fr);column-gap:10px}
#lgsHesap .sat>.c1{flex-wrap:wrap;row-gap:0;line-height:1.15}
#lgsHesap .sat>.c1 small{flex-basis:100%;padding-left:16px;font-weight:400;font-size:11.5px;color:var(--soluk)}
#lgsHesap .ayar{display:flex;align-items:center;gap:4px;min-width:0}
#lgsHesap .ayar button{flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--cizgi);background:#fff;font-size:16px;line-height:1;font-weight:700;color:var(--murekkep);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
#lgsHesap .ayar button:active{background:var(--fosfor);border-color:var(--fosfor)}
#lgsHesap .ayar output{flex:0 0 24px;text-align:center;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
#lgsHesap .ayar input[type=range]{flex:1;min-width:0;height:26px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;
  --renk:var(--iyi,#13a36e);--d:0%;--kapali:0%}
#lgsHesap .ayar.yanlis input[type=range]{--renk:var(--hata)}
#lgsHesap .ayar input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:9px;
  background:linear-gradient(90deg,var(--renk) 0 var(--d),var(--cizgi) var(--d) calc(100% - var(--kapali)),repeating-linear-gradient(45deg,#d7dbe7 0 3px,#eef0f6 3px 6px) calc(100% - var(--kapali)))}
#lgsHesap .ayar input[type=range]::-moz-range-track{height:8px;border-radius:9px;background:var(--cizgi)}
#lgsHesap .ayar input[type=range]::-moz-range-progress{height:8px;border-radius:9px;background:var(--renk)}
#lgsHesap .ayar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:#fff;border:3px solid var(--renk);box-shadow:0 1px 3px rgba(0,0,0,.2)}
#lgsHesap .ayar input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--renk)}
#lgsHesap .ayar input[type=range]:focus-visible{outline:none}
#lgsHesap .ayar input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(255,212,59,.8)}
#lgsHesap .netk output{display:inline-block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
#lgsHesap .sat.sozel .netk output{color:var(--sozel)}
#lgsHesap .sat.sayisal .netk output{color:var(--sayisal)}
#lgsHesap .bas .bd{color:#9be3c4}
#lgsHesap .bas .by{color:#ffb4ae}
#lgsHesap .toplam>.c1 small{display:inline;padding:0;flex-basis:auto;font-size:inherit;color:inherit;font-weight:inherit}
#lgsHesap .toplam{grid-template-columns:minmax(0,1.35fr) minmax(0,2fr) minmax(0,2fr) minmax(0,.75fr)}
#lgsHesap #lgsHesap .toplam>span,#lgsHesap .toplam>span{text-align:center}
@container lgs (max-width:560px){#lgsHesap .bas{display:none}
#lgsHesap .sat{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ad net" "d d" "y y";row-gap:6px;padding:10px 8px 10px 4px}
#lgsHesap .sat>.c1{grid-area:ad}
#lgsHesap .sat .netk{grid-area:net}
#lgsHesap .sat .ayar.dogru{grid-area:d}
#lgsHesap .sat .ayar.yanlis{grid-area:y}
#lgsHesap .ayar::before{flex:0 0 46px;font-size:11.5px;color:var(--soluk)}
#lgsHesap .ayar.dogru::before{content:"Doğru"}
#lgsHesap .ayar.yanlis::before{content:"Yanlış"}
#lgsHesap .ayar button{flex-basis:32px;width:32px;height:32px;font-size:18px}
#lgsHesap .toplam{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));grid-template-areas:none;padding:8px 8px 8px 4px}
#lgsHesap .toplam>span:nth-child(2)::before{content:"D ";font-weight:400;color:var(--soluk)}
#lgsHesap .toplam>span:nth-child(3)::before{content:"Y ";font-weight:400;color:var(--soluk)}
}
#lgsHesap @container lgs (max-width:560px){ }
#lgsHesap .ayar input[type=range]{width:auto;max-width:none;height:26px;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0}
#lgsHesap .ayar input[type=range]:focus{box-shadow:none;background:transparent}
#lgsHesap .sat>.c1{display:block;text-align:left}
#lgsHesap .sat>.c1::before{display:inline-block;width:8px;height:8px;margin-right:7px;vertical-align:middle}
#lgsHesap .sat>.c1 small{display:block;padding-left:15px}
#lgsHesap .toplam>.c1{grid-area:auto!important}
#lgsHesap .toplam>.c1::before{display:none}
@container lgs (max-width:560px){#lgsHesap .toplam{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))!important}
#lgsHesap .toplam>.c1 small{display:inline;padding:0}
#lgsHesap .sat>.c1 small{display:inline;padding-left:6px}
}
#lgsHesap .ayar input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:9px;
  background:linear-gradient(90deg,var(--renk) 0 var(--d),var(--cizgi) var(--d) calc(100% - var(--kapali)),#c3c9da calc(100% - var(--kapali)) 100%)}
#lgsHesap .toplam>.c1 small{display:inline!important;padding:0!important}
#lgsHesap .toplam>.c1{white-space:nowrap}
#lgsHesap #hform{border:0;border-radius:20px;box-shadow:0 8px 28px rgba(23,35,90,.10)}
#lgsHesap .bas{background:linear-gradient(100deg,#17235a 0%,#2a3d9c 100%)}
#lgsHesap .sat{transition:background .15s}
#lgsHesap .sat:hover{background:#fafbff}
#lgsHesap .ayar input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-7px;transition:transform .12s}
#lgsHesap .ayar input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
#lgsHesap .ayar button:hover{border-color:var(--murekkep)}
#lgsHesap .hesapla{background:linear-gradient(180deg,#ffe066,#ffc919);border-radius:14px}
#lgsHesap .temizle{border-radius:14px}
#lgsHesap .sonuc{border-radius:20px;background:linear-gradient(120deg,#17235a 0%,#2a3d9c 70%,#3a55c9 100%);box-shadow:0 10px 30px rgba(23,35,90,.25);position:relative}
#lgsHesap .sonuc::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,212,59,.18);pointer-events:none}
#lgsHesap .kutu+.kutu{background:rgba(255,255,255,.07)}
#lgsHesap .kutu.ana b{text-shadow:0 2px 12px rgba(255,212,59,.35)}
#lgsHesap .kutu b.zipla{animation:zipla .5s cubic-bezier(.2,1.6,.4,1)}
#lgsHesap @keyframes zipla{0%{transform:scale(.92)}
#lgsHesap 100%{transform:scale(1)}
#lgsHesap }
.okul{border:0;border-radius:20px;box-shadow:0 8px 28px rgba(23,35,90,.08)}
#lgsHesap .okullar li{transition:background .15s}
#lgsHesap .okullar li:hover{background:#fafbff}
#lgsHesap .sec select,#lgsHesap .okul select{border-radius:999px;padding-left:12px}
@media (prefers-reduced-motion:reduce){#lgsHesap .kutu b.zipla{animation:none}
}
#lgsHesap{max-width:1000px}
#lgsHesap .ayar.dogru input[type=range]{--renk:var(--r,#13a36e)}
#lgsHesap .ayar.yanlis input[type=range]{--renk:#ef4444}
#lgsHesap .ayar input[type=range]::-webkit-slider-thumb{border-color:var(--renk)}
#lgsHesap .sat .netk output{color:var(--r)!important;background:color-mix(in srgb,var(--r) 12%,#fff);border-radius:12px;padding:4px 10px}
#lgsHesap .sat>.c1::before{background:var(--r)!important;width:10px;height:10px}
#lgsHesap .sat>.c1{font-size:16px}
#lgsHesap .ayar output{font-size:18px;flex-basis:28px}
#lgsHesap .ayar button{width:30px;height:30px;flex-basis:30px;font-size:18px}
#lgsHesap .ayar input[type=range]{height:30px}
#lgsHesap .ayar input[type=range]::-webkit-slider-runnable-track{height:10px}
#lgsHesap .ayar input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-7px}
#lgsHesap .kutu.ana b{font-size:46px}
#lgsHesap .kutu b{font-size:36px}
#lgsHesap .hesapla{height:54px;font-size:18px}
#lgsHesap .temizle{height:54px}
@container lgs (min-width:761px){#lgsHesap #hform{padding:16px 16px 16px 30px;background:#fff}
#lgsHesap #hform::before{left:10px}
#lgsHesap .bas{display:none}
#lgsHesap #dersler{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#lgsHesap #dersler .sat{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ad net" "d d" "y y";row-gap:8px;padding:14px 16px;border:1.5px solid var(--cizgi);border-left:5px solid var(--r);border-radius:16px;background:#fff}
#lgsHesap #dersler .sat>.c1{grid-area:ad}
#lgsHesap #dersler .sat .netk{grid-area:net}
#lgsHesap #dersler .ayar.dogru{grid-area:d}
#lgsHesap #dersler .ayar.yanlis{grid-area:y}
#lgsHesap #dersler .sat>.c1::before{display:none}
#lgsHesap #dersler .sat>.c1 small{display:inline;padding-left:6px}
#lgsHesap #dersler .ayar::before{flex:0 0 52px;font-size:13px;color:var(--soluk)}
#lgsHesap #dersler .ayar.dogru::before{content:"Doğru"}
#lgsHesap #dersler .ayar.yanlis::before{content:"Yanlış"}
#lgsHesap #dersler .sat .netk output{font-size:20px}
#lgsHesap .tablo>.toplam{margin-top:12px;border-radius:14px;padding:10px 16px;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
#lgsHesap .toplam>span:nth-child(2)::before{content:"Doğru ";font-weight:400;color:var(--soluk)}
#lgsHesap .toplam>span:nth-child(3)::before{content:"Yanlış ";font-weight:400;color:var(--soluk)}
#lgsHesap .toplam>span:nth-child(4)::before{content:"Net ";font-weight:400;color:var(--soluk)}
#lgsHesap .dugmeler{margin:14px 0 0}
}
@container lgs (max-width:760px){#lgsHesap #dersler .sat{border-left:4px solid var(--r)}
}
@container lgs (max-width:760px){#lgsHesap .toplam>.c1 small,#lgsHesap .toplam>.c1{font-size:13px}
#lgsHesap .toplam>.c1 small{display:none!important}
#lgsHesap .kutu.ana b{font-size:34px}
#lgsHesap .kutu b{font-size:26px}
#lgsHesap .sonuc::after{display:none}
}
@container lgs (max-width:760px){#lgsHesap .toplam .ek{display:none}
}