/* Ortak laboratuvar stilleri (laboratuvar.js ile birlikte).
   Butun seciciler .lab altinda; laboratuvara ozel stiller kendi .css
   dosyasinda. Renkler ve yazi tipleri sitenin paletinden (ders-sitesi.css). */
.lab {
  --kart: #ffffff;
  --zemin: #eef2f6;
  --ince: #d6dee7;
  --soluk: #566779;
  --yesil: #10b981;
  --yesil-z: #e7f8f1;
  --kirmizi: #f43f5e;
  --kirmizi-z: #feecef;
  --oz: #1f56a5;
  --oz-z: #e6eef9;
  --et: #f59e0b;
  --et-z: #fff5e1;
  --golge: 0 1px 2px rgba(13, 27, 46, .05), 0 8px 24px -12px rgba(13, 27, 46, .18);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  position: relative;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
.lab * { box-sizing: border-box; }
.lab button { cursor: pointer; font: inherit; }
.lab b, .lab strong { font-weight: 800; }

/* ---------- ust cubuk ---------- */
.lab .mt-ust { position: sticky; top: 0; z-index: 20; margin: 0 -8px; padding: 10px 8px 0; background: rgba(238, 242, 246, .92); backdrop-filter: blur(10px); }
.lab .mt-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.lab .mt-nav::-webkit-scrollbar { display: none; }
.lab .mt-nav-d { flex: none; display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border: 1px solid var(--ince); border-radius: 999px; background: #fff; color: var(--soluk); font-size: 14px; font-weight: 700; white-space: nowrap; transition: .2s; }
.lab .mt-nav-d span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--zemin); font-family: var(--font-display); font-size: 12px; transition: .2s; }
.lab .mt-nav-d:hover { border-color: var(--oz); color: var(--ink); }
.lab .mt-nav-d.bitti span { background: var(--yesil); color: #fff; }
.lab .mt-nav-d.aktif { background: var(--navy); border-color: var(--navy); color: #fff; }
.lab .mt-nav-d.aktif span { background: #fff; color: var(--navy); }
@media (min-width: 1100px) { .lab .mt-nav { justify-content: center; } }
.lab .mt-ilerleme { height: 3px; background: var(--ince); }
.lab .mt-ilerleme i { display: block; width: 0; height: 100%; background: var(--blue); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.lab .mt-adimlar { padding: 26px 0 18px; }

/* ---------- alt cubuk ---------- */
.lab .mt-alt { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--ince); border-radius: 14px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(13, 27, 46, .12); }
.lab .mt-sayfa { color: var(--soluk); font-size: 14px; font-weight: 700; }
.lab .mt-klavye { color: var(--soluk); font-size: 12px; font-weight: 600; }
@media (max-width: 600px) { .lab .mt-klavye { display: none; } }

/* ---------- duzen ---------- */
.lab .mt-adim { display: none; }
.lab .mt-adim.aktif { display: block; animation: mt-gir .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes mt-gir { from { opacity: 0; transform: translateY(14px); } }
@keyframes mt-cevir { from { opacity: 0; transform: rotateX(80deg); } }
@keyframes mt-salla { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes mt-pat { 50% { transform: scale(1.15); } }
.lab .mt-bas { max-width: 900px; margin: 4px 0 18px; }
.lab .mt-etiket { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--oz-z); color: var(--oz); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.lab .mt-bas h2 { margin: 10px 0 8px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; }
.lab .mt-giris { margin: 0; color: #3a4b5e; font-size: 18px; }
.lab .mt-iki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lab .mt-iki.genis-sol { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.lab .mt-iki.genis-sag { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
@media (max-width: 920px) { .lab .mt-iki, .lab .mt-iki.genis-sol, .lab .mt-iki.genis-sag { grid-template-columns: minmax(0, 1fr); } }
.lab .mt-kart { min-width: 0; padding: 18px; border: 1px solid var(--ince); border-radius: 16px; background: var(--kart); box-shadow: var(--golge); }
.lab .mt-kart + .mt-kart.alt { margin-top: 18px; }
.lab .mt-kart-baslik { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 17px; font-weight: 900; }
.lab .mt-kart-baslik.kucuk { margin-bottom: 4px; font-size: 15px; }
.lab .mt-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.lab .mt-ipucu { margin: 0; color: var(--soluk); font-size: 14px; }
.lab .mt-lejant { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; color: var(--soluk); font-size: 13px; font-weight: 700; }
.lab .mt-lejant i { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }
.lab .mt-lejant i.yesil { background: var(--yesil); }
.lab .mt-lejant i.kirmizi { background: var(--kirmizi); }
.lab .mt-lejant i.mavi { background: var(--oz); }
.lab .mt-lejant i.turuncu { background: var(--et); }
.lab .mt-lejant i.hata { background: #fff; box-shadow: inset 0 0 0 3px var(--et); }
.lab .mt-lejant i.halka { background: #fff; box-shadow: inset 0 0 0 3px var(--soluk); }
.lab .mt-lejant i.dogru { background: #fff; box-shadow: inset 0 0 0 3px var(--oz); }
.lab .mt-lejant i.cizgi { width: 18px; height: 3px; border-radius: 2px; vertical-align: 3px; }
.lab .mt-lejant i.cizgi.siyah { background: var(--ink); }
.lab .mt-lejant i.cizgi.mavi { background: var(--oz); }
.lab .mt-lejant i.cizgi.kirmizi { background: var(--kirmizi); }
.lab .mt-lejant i.cizgi.kesik { background: repeating-linear-gradient(90deg, var(--et) 0 6px, transparent 6px 9px); }
.lab .mt-lejant i.kare { border-radius: 3px; }
.lab .mt-not { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--zemin); color: #3a4b5e; font-size: 15px; }
.lab .mt-not.uyari { background: var(--et-z); color: #7c4a03; }
.lab .mt-not.vurgu { background: var(--oz-z); color: #143a70; animation: mt-gir .4s ease both; }
.lab .mt-not.iyi { background: var(--yesil-z); color: #065f46; animation: mt-gir .4s ease both; }
.lab .mt-not.kotu { background: var(--kirmizi-z); color: #9f1239; animation: mt-gir .4s ease both; }
.lab .mt-not[hidden] { display: none; }
.lab .mt-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 16px; }
.lab .mt-liste.kucuk { margin-top: 14px; font-size: 15px; }
.lab .mt-liste.kucuk li { padding-left: 14px; border-left: 3px solid var(--ince); }

/* ---------- dugmeler ve girdiler ---------- */
.lab .mt-btn { padding: 10px 16px; border: 1px solid var(--ince); border-radius: 12px; background: #fff; color: var(--ink); font-weight: 800; transition: transform .12s, box-shadow .2s, background .2s; }
.lab .mt-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(13, 27, 46, .35); }
.lab .mt-btn:active { transform: translateY(1px); }
.lab .mt-btn.birincil { border-color: var(--oz); background: var(--oz); color: #fff; }
.lab .mt-btn.koyu { border-color: var(--ink); background: var(--ink); color: #fff; }
.lab .mt-btn.buyuk { padding: 13px 22px; border-radius: 14px; font-size: 17px; }
.lab .mt-btn.genis { width: 100%; }
.lab .mt-btn[aria-pressed="true"] { border-color: var(--oz); background: var(--oz-z); color: #143a70; }
.lab .mt-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.lab .mt-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 12px; background: var(--zemin); }
.lab .mt-seg button { padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--soluk); font-size: 15px; font-weight: 800; }
.lab .mt-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.lab .mt-etiketcik { color: var(--soluk); font-size: 14px; font-weight: 800; }
.lab .mt-onay { display: inline-flex; align-items: center; gap: 8px; color: var(--soluk); font-size: 14px; font-weight: 700; cursor: pointer; }
.lab .mt-onay input { width: 18px; height: 18px; accent-color: var(--oz); }
.lab .mt-alan { margin: 14px 0; }
.lab .mt-alan label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 15px; font-weight: 800; }
.lab .mt-alan label > b { color: var(--oz); font-family: var(--mono); white-space: nowrap; }
.lab input[type=range] { width: 100%; height: 8px; border-radius: 99px; background: var(--zemin); outline: none; -webkit-appearance: none; appearance: none; }
.lab input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; border: 4px solid var(--oz); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(31, 86, 165, .4); cursor: grab; -webkit-appearance: none; }
.lab input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 4px solid var(--oz); border-radius: 50%; background: #fff; cursor: grab; }
.lab input[type=text], .lab input[type=search], .lab select { width: 100%; padding: 10px 12px; border: 1px solid var(--ince); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; }
.lab input[type=text]:focus, .lab input[type=search]:focus, .lab select:focus { border-color: var(--oz); outline: 2px solid var(--oz-z); }
.lab .mt-rozet { display: inline-block; padding: 2px 9px; border-radius: 99px; background: var(--zemin); font-size: 13px; font-weight: 800; }
.lab .mt-rozet.yesil { background: var(--yesil-z); color: #047857; }
.lab .mt-rozet.kirmizi { background: var(--kirmizi-z); color: #be123c; }
.lab .mt-rozet.sari { background: var(--et-z); color: #92400e; }
.lab .mt-rozet.mavi { background: var(--oz-z); color: #143a70; }

/* ---------- grafikler ---------- */
.lab canvas { display: block; width: 100%; }
.lab .mt-grafik { height: 420px; touch-action: manipulation; }
.lab .mt-grafik.kisa { height: 230px; }
.lab .mt-grafik.orta { height: 300px; }
.lab .mt-grafik.mini { height: 90px; margin-top: 4px; }
.lab .mt-grafik.mini2 { height: 150px; }
.lab .mt-grafik.tikla { cursor: crosshair; }
@media (max-width: 600px) { .lab .mt-grafik { height: 320px; } }
.lab .mt-balon { position: fixed; z-index: 60; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13px; pointer-events: none; opacity: 0; transition: opacity .12s; }
.lab .mt-balon.acik { opacity: 1; }

/* ---------- tablo ---------- */
.lab .mt-tablo-kutu { max-height: 380px; overflow: auto; border: 1px solid var(--ince); border-radius: 14px; }
.lab .mt-tablo { width: 100%; border-collapse: collapse; font-size: 15px; }
.lab .mt-tablo th, .lab .mt-tablo td { padding: 7px 10px; text-align: left; white-space: nowrap; }
.lab .mt-tablo thead th { position: sticky; top: 0; z-index: 1; border-bottom: 2px solid var(--ince); background: #fff; }
.lab .mt-tablo tbody tr { border-bottom: 1px solid var(--zemin); }
.lab .mt-sonuc { font-weight: 900; }

/* ---------- ac-kapa sorular ---------- */
.lab .mt-sorular { display: grid; gap: 10px; }
.lab .mt-soru { display: grid; gap: 6px; padding: 12px 14px; border: 2px solid var(--ince); border-radius: 14px; background: #fff; color: var(--ink); text-align: left; transition: .2s; }
.lab .mt-soru > b { font-size: 16px; }
.lab .mt-soru > span { display: none; color: #3a4b5e; font-size: 15px; }
.lab .mt-soru:not(.acik) > b::after { content: "  👆"; }
.lab .mt-soru.acik { border-color: var(--oz); background: var(--oz-z); cursor: default; }
.lab .mt-soru.acik > span { display: block; animation: mt-gir .3s ease both; }

/* ---------- skor ve cubuk ---------- */
.lab .mt-skor { display: flex; align-items: baseline; gap: 8px; }
.lab .mt-skor b { font-family: var(--font-display); font-size: 64px; line-height: 1; }
.lab .mt-skor span { color: var(--soluk); font-size: 18px; font-weight: 800; }
.lab .mt-skor.kucuk b { font-size: 40px; }
.lab .mt-skor.kucuk span { font-size: 15px; }
.lab .mt-cubuk { height: 14px; margin: 10px 0 12px; overflow: hidden; border-radius: 99px; background: var(--zemin); }
.lab .mt-cubuk i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--et), var(--yesil)); transition: width .2s; }
.lab .mt-sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.lab .mt-sayilar > div { display: grid; padding: 10px; border-radius: 12px; background: var(--zemin); text-align: center; }
.lab .mt-sayilar b { font-family: var(--font-display); font-size: 34px; line-height: 1; }
.lab .mt-sayilar span { color: var(--soluk); font-size: 13px; font-weight: 800; }
.lab .mt-sayilar .yesil { background: var(--yesil-z); color: #047857; }
.lab .mt-sayilar .kirmizi { background: var(--kirmizi-z); color: #be123c; }
.lab .mt-sayilar .mavi { background: var(--oz-z); color: #143a70; }
.lab .mt-sayilar .sari { background: var(--et-z); color: #92400e; }

/* ---------- hesap dokumu ---------- */
.lab .mt-hesap { display: grid; gap: 4px; margin-top: 8px; padding: 12px 14px; border: 2px dashed #c6d1dc; border-radius: 14px; background: #fbfcfd; font-size: 16px; }
.lab .mt-hesap-bas { margin-bottom: 4px; color: var(--soluk); font-size: 14px; }
.lab .mt-hesap > div:not(.mt-hesap-bas) { display: flex; justify-content: space-between; gap: 10px; }
.lab .mt-hesap > div > b { font-family: var(--mono); }
.lab .mt-hesap .toplam { margin-top: 4px; padding-top: 6px; border-top: 2px solid var(--ink); font-size: 18px; font-weight: 900; }
.lab .mt-hesap .sonuc { display: block !important; margin-top: 6px; padding: 8px 10px; border-radius: 10px; font-weight: 800; }
.lab .mt-hesap .sonuc small { color: var(--soluk); font-weight: 700; }
.lab .mt-hesap .sonuc.yesil { background: var(--yesil-z); color: #047857; }
.lab .mt-hesap .sonuc.kirmizi { background: var(--kirmizi-z); color: #be123c; }

/* ---------- 2x2 tablo ---------- */
.lab .mt-karisiklik { width: 100%; margin: 14px 0 6px; border-collapse: separate; border-spacing: 6px; font-size: 15px; }
.lab .mt-karisiklik th { color: var(--soluk); font-weight: 600; text-align: center; }
.lab .mt-karisiklik tbody th { text-align: right; }
.lab .mt-karisiklik td { height: 64px; border-radius: 12px; font-family: var(--font-display); font-size: 32px; font-weight: 900; text-align: center; }
.lab .mt-karisiklik td.iyi { background: var(--yesil-z); color: #047857; }
.lab .mt-karisiklik td.kotu { background: var(--kirmizi-z); color: #be123c; }
.lab .mt-karisiklik td.pat { animation: mt-pat .35s ease; }
.lab .mt-hatalar p { margin: 6px 0 0; padding-left: 12px; border-left: 3px solid #fda4af; font-size: 14px; }

/* ---------- surec seridi ---------- */
.lab .mt-dongu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.lab .mt-dongu span { padding: 6px 10px; border-radius: 99px; background: var(--zemin); font-size: 14px; font-weight: 800; }
.lab .mt-dongu span.on { background: var(--navy); color: #fff; }
.lab .mt-dongu i { width: 14px; height: 2px; background: var(--ince); }

/* ---------- tekrar ---------- */
.lab .mt-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.lab .mt-cevir { position: relative; min-height: 120px; padding: 14px; border: 2px solid var(--ince); border-radius: 14px; background: #fff; color: var(--ink); text-align: center; }
.lab .mt-cevir .on-yuz { font-size: 19px; font-weight: 900; }
.lab .mt-cevir .arka-yuz { display: none; font-size: 15px; }
.lab .mt-cevir.dondu { border-color: var(--oz); background: var(--oz-z); animation: mt-cevir .4s ease both; }
.lab .mt-cevir.dondu .on-yuz { display: none; }
.lab .mt-cevir.dondu .arka-yuz { display: block; }
.lab .mt-sinav { display: grid; gap: 14px; }
.lab .mt-q-s { margin-bottom: 8px; font-size: 16px; font-weight: 800; }
.lab .mt-q-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .lab .mt-q-sec { grid-template-columns: 1fr; } }
.lab .mt-q-sec button { padding: 9px 12px; border: 2px solid var(--ince); border-radius: 12px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; text-align: left; }
.lab .mt-q-sec button:hover:not(:disabled) { border-color: var(--oz); }
.lab .mt-q-sec button:disabled { cursor: default; }
.lab .mt-q-sec button.dogru { border-color: var(--yesil); background: var(--yesil-z); }
.lab .mt-q-sec button.yanlis { border-color: var(--kirmizi); background: var(--kirmizi-z); }
.lab .mt-q-a { display: none; margin-top: 8px; color: #3a4b5e; font-size: 14px; }
.lab .mt-q.bitti .mt-q-a { display: block; }
.lab .mt-puan { position: sticky; top: 90px; display: grid; justify-items: center; gap: 6px; text-align: center; }
.lab .mt-puan span { color: var(--soluk); font-weight: 800; }
.lab .mt-puan b { font-family: var(--font-display); font-size: 64px; line-height: 1; }
.lab .mt-puan p { margin: 0; color: var(--soluk); }

@media (prefers-reduced-motion: reduce) { .lab *, .lab *::before, .lab *::after { animation: none !important; transition: none !important; } }