/* =============================================================================
   TAHTAM KONU ANLATIMI — TASARIM DİLİ
   -----------------------------------------------------------------------------
   NEREDEN GELDİ. 9 Eylül gecesi MEHMET eski tarzı reddetti: "arayüz sade ama
   yapılan şeyler öğrenmeyi kolaylaştıracak bir etki yapmıyor... bir noktada
   anlamsızlaşıyor." Karşılaştırma olarak kendi elindeki bir dosyayı gösterdi:
   `1-4-2-coulomb-kanunu.html`. Onu açıp iki modunu da gezdim; farkı tek tek
   sahnelerde değil, KABUĞUN KENDİSİNDE buldum:

     eski (bizim)                  yeni (Coulomb'dan alınan)
     iki kutu + yan sayı tablosu   ekranın tamamı tek sahne
     açık zemin, her şey aynı ağır koyu zemin, parlayan şey öne çıkıyor
     5 satır sayı, hiçbiri öne çık dev puntoyla TEK sonuç
     tek mod, sadece kaydıraç      Adım Adım Anlatım / Serbest Deney
     şema sembolü                  fiziksel görünen, parlayan nesne

   Bu dosyadaki :root değişkenleri ve iskelet, o dosyanın tasarım dilidir ve
   BİLEREK AYNEN KORUNMUŞTUR — kaynak dosyanın kendi notu da bunu istiyor.
   Değişen tek şey çizim tekniği: orası canvas, burası SVG.

   NİÇİN SVG. Okul bilgisayarını taklit edip (işlemci 20 kat yavaş) ölçtüm:
     Coulomb (canvas)   60 fps → 7,7 fps
     bizim sahne (SVG)  60 fps → 58,3 fps
   Canvas her karede bütün ekranı JS ile yeniden çiziyor; SVG'de yalnız birkaç
   öğenin konumu değişiyor, gerisini tarayıcı yapıyor. Yavaş makinede fark
   yedi kat. Görünüş oradan alındı, hız burada kaldı.
   ============================================================================= */

:root{
  /* Yüzeyler */
  --bg:#0A0F1C;
  --surface:#121A2C;
  --surface-2:#1A2440;
  --line:#2A3653;
  --line-soft:#1E2942;

  /* Yazı */
  --text:#EEF3FB;
  --text-dim:#8FA0BF;
  --text-mute:#5D6E8C;

  /* ANLAM RENKLERİ — her animasyonda AYNI anlamı taşır. Sahne yazan kişi
     bunları konuya göre değiştirmez; öğrenci ikinci konuda aynı rengi görüp
     aynı şeyi anlasın diye sabittir. */
  --pos:#FF5B4A;        /* pozitif / kaynak / gerilim */
  --neg:#35A7FF;        /* negatif / dönüş yolu */
  --force:#FFC93C;      /* akım, kuvvet, vektör — "akan şey" */
  --accent:#24D6C4;     /* Tahtam vurgusu, seçili durum */
  --neutral:#8FA0BF;    /* ölçü, mesafe, yardımcı çizgi */
  --uyari:#FF7043;      /* sınır aşıldı: sigorta attı, lamba patladı */

  /* AKILLI TAHTA ÖLÇEKLERİ. Ekran büyüdükçe yazı da büyüyor; sınıfın
     arkasındaki öğrenci için tek çare bu. Sabit px kullanma. */
  --fs-title: clamp(20px, 2.1vw, 34px);
  --fs-sub:   clamp(13px, 1.05vw, 18px);
  --fs-step:  clamp(19px, 1.65vw, 30px);
  --fs-body:  clamp(15px, 1.15vw, 21px);
  --fs-num:   clamp(22px, 2.0vw, 34px);
  --fs-btn:   clamp(16px, 1.25vw, 22px);

  --tap:60px;           /* dokunmatik en küçük hedef — akıllı tahtada parmakla */
  --radius:16px;
  --gap: clamp(10px, 1vw, 20px);
}

*{margin:0;padding:0;box-sizing:border-box}
/* display:flex/grid veren her kural [hidden]'ı eziyor ve gizlenmesi gereken
   şey ekranda kalıyor. 9 Eylül: tahmin satırı altıncı adımda hâlâ
   duruyordu. Tek satırla kapanıyor, her yerde geçerli olsun diye burada. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.app{height:100%;display:flex;flex-direction:column}

/* ---------------------------------------------------------------- üst şerit */
.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--gap);
  padding:calc(var(--gap)*0.8) var(--gap);
  background:linear-gradient(180deg,var(--surface) 0%,rgba(18,26,44,0) 100%);
  border-bottom:1px solid var(--line-soft);position:relative;
}
.badge{
  flex:0 0 auto;font-size:var(--fs-sub);font-weight:700;letter-spacing:.5px;
  color:var(--bg);background:var(--accent);
  padding:6px 12px;border-radius:8px;
}
.titles{flex:1 1 auto;min-width:0}
.titles h1{font-size:var(--fs-title);font-weight:700;line-height:1.15;letter-spacing:-.2px}
.titles p{font-size:var(--fs-sub);color:var(--text-mute);margin-top:2px}
.iconbtn{
  flex:0 0 auto;width:var(--tap);height:var(--tap);border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:20px;color:var(--text-dim);
  transition:background .15s,color .15s;
}
.iconbtn:hover,.iconbtn:active{background:var(--line);color:var(--text)}
/* Konuya dön bağlantısı düğme gibi görünür ama <a>: orta tıkla yeni sekme,
   sağ tıkla kopyala — öğretmenin tarayıcıdan beklediği davranış. */
.geri-baglanti{text-decoration:none;font-size:1.1rem}

/* -------------------------------------------------------------------- sahne */
/* Sahne asla ezilmesin: alt kumanda büyürse kendi içinde sıkışsın.
   Telefonda ölçüldü — sahne 221 px'e inmişti ve yazılar 8 px'e düşüyordu. */
/* min-height YOK. Vardı (46vh) ve kusurun kaynağıydı: alt kumanda büyüyünce
   ikisinin toplamı ekranı aşıyor, taşan kısım — yani kaydıraçlar — ekranın
   altında kalıyordu (MEHMET, 10 Eylül: "kirşofta hiç görünmüyorlar").
   Artık sınır kumandada: kumanda kendini sınırlıyor, sahne kalanı alıyor. */
.stage{flex:1 1 auto;position:relative;min-height:0}
#sahne{display:block;width:100%;height:100%;touch-action:none}
/* UÇUŞAN BALONCUK ARTIK SAYDAM DEĞİL. Yarı saydam zemin sahnenin
   yazılarının üstüne binince ikisi birden okunmaz oluyordu (MEHMET,
   13 Eylül, ekran görüntüsüyle). Zemin kapatıyor, kenarlık var, yazı
   soluk değil. Adım ipucusu buradan çıkarıldı; burada yalnız parçaya
   dokununca çıkan geçici yazı ve serbest deney yönergesi kaldı. */
.hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  max-width:min(70ch, 92%);
  font-size:var(--fs-sub);color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  padding:8px 16px;border-radius:20px;
  pointer-events:none;opacity:0;transition:opacity .4s;text-align:center;
}

/* ÖNCEKİ ADIM HAYALETİ (denetim 02, G2). Köşede küçük kopya (köşeyi JS
   seçer, yazının az olduğu yer), 2,5 saniye sonra söner. Dokunmayı engellemez. */
.hayalet{
  position:absolute;left:8px;top:8px;width:min(17%,260px);margin:0;
  background:var(--bg);border:2px solid var(--accent);border-radius:12px;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.5);pointer-events:none;
  opacity:0;transition:opacity 1s;z-index:2;
}
.hayalet.gor{opacity:.92;transition:opacity .2s}
.hayalet img{display:block;width:100%;height:auto}
/* Üst şeritteki hâli (K9): çizimi örtmez, yazısı küçük. */
.hayalet.ustte{border-width:1px;border-radius:8px}
.hayalet.ustte figcaption{font-size:.68rem;padding:0 5px}
.hayalet figcaption{position:absolute;left:0;top:0;padding:2px 8px;border-bottom-right-radius:8px;
  font-size:var(--fs-sub);font-weight:700;color:var(--bg);background:var(--accent)}

/* "SU İLE GÖR" (denetim 02, G3) — kabuğun düğmesi, kumanda sayılmaz. */
.su-dugme{
  flex:0 0 auto;min-height:var(--tap);padding:0 16px;border-radius:12px;
  background:var(--surface-2);border:2px solid #3FA9F5;color:#BFE3FF;
  font-size:var(--fs-btn);font-weight:700;display:inline-flex;align-items:center;gap:8px;
}
.su-dugme[aria-pressed="true"]{background:#3FA9F5;color:var(--bg)}
@media (max-width:700px){ .su-yazi{display:none} .su-dugme{padding:0 12px} }

/* ADIM İPUCU — anlatım panelinde SABİT satır, sönmüyor, sahnenin
   üstüne binmiyor. Yanındaki düğme kaydıraçların olduğu kipe geçiriyor:
   anlatım kipinde kaydıraç yok, "kaydıracı çek" diyen ipucu orada
   ölü bir cümleydi. */
.adim-ipucu{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:6px;font-size:var(--fs-sub);color:var(--accent);
}
.adim-ipucu[hidden]{display:none}
.dene-dugme{
  flex:0 0 auto;min-height:48px;padding:0 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--accent);
  color:var(--accent);font-size:var(--fs-sub);font-weight:700;
}
.dene-dugme:hover{background:var(--line)}
/* ATÖLYE KARTI (G6) ve ARIZA AVI (G5) */
.atolye{margin-top:6px;font-size:var(--fs-sub);color:var(--force);line-height:1.35}
.dock.soruyor .atolye{display:none}
.ariza-serit{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 2px calc(var(--gap)*.6)}
.ariza-yazi{font-size:var(--fs-sub);color:var(--uyari);font-weight:600}
.ariza-serit.bulundu .ariza-yazi{color:var(--accent)}
.hint.show{opacity:1}

/* TELEFON DİK TUTULUNCA. Sahneler 1780x700'lük bir tahta kutusuna çiziliyor;
   390 px genişliğinde dik bir ekranda o kutu %20 ölçekle iniyor, kabuk da
   yazıyı okunur kalsın diye 3 katına çıkarıyor — etiketler bu yüzden üst
   üste biniyor. Yan çevirince aynı sahne tam oturuyor (ölçüldü: 844x390'da
   çizim 2,2 kat büyük). Bu satır bunu öğrenciye söylüyor; dokununca kapanıyor. */
/* Başlığın altında ince şerit; çizimin üstüne binmez (denetim 01, K7). */
.yan-cevir{
  flex:0 0 auto;width:100%;text-align:center;
  font-size:.85rem;font-weight:600;color:var(--bg);background:var(--accent);
  padding:4px 12px;min-height:30px;
  display:none;align-items:center;justify-content:center;
}
@media (max-width:700px) and (orientation:portrait){
  .yan-cevir:not([hidden]){display:flex}
}

/* SÜRÜKLENEBİLİR PARÇA. Öğrencinin dokunacağı şeyin dokunulacak gibi
   görünmesi gerekiyor; yoksa kimse dokunmuyor (eski tarzın kusurlarından
   biri buydu: ekranda tıklanabilir bir şey olduğu belli değildi). */
.tutulur{cursor:grab}
.tutulur:active{cursor:grabbing}
.yuva{cursor:pointer}

/* -------------------------------------------------------------- alt kumanda */
/* ALT KUMANDA EKRANIN YARISINI YİYEMEZ. Ölçüldü (496x1028): iki kaydıraçlı
   bir sahnede kumanda 530 px'e çıkıyordu, sahneye 420 px kalıyordu.
   Tavan koyuldu; taşarsa kumanda kendi içinde kayar, sahne küçülmez. */
.dock{
  flex:0 0 auto;background:var(--surface);
  border-top:1px solid var(--line);
  padding:var(--gap);
  display:flex;flex-direction:column;gap:var(--gap);
  max-height:34vh;overflow-y:auto;overscroll-behavior:contain;
}
/* SORU SORARKEN ALT ALAN KÜÇÜLÜR. MEHMET, 14 Eylül: "alttaki yazı alanı çok
   genişliyor ve animasyonun üzerine geliyor... animasyonun küçük kalmasına
   neden olmasın." Ölçüldü: soru çıkan adımda kumanda tavana dayanıp taşıyordu
   (1366x768'de sahneye 363 px kalıyor, bir şık ekranın altında kalıyordu).
   Soru sorulurken adım açıklaması ve ipucu satırı gizleniyor: hem yer açılıyor
   hem de cevap metnin içinde hazır durmuyor. Cevaptan sonra karşılık yazısı
   aynı yeri kullanıyor. */
.dock.soruyor .script .d,
.dock.soruyor .adim-ipucu{display:none}
/* SORU SORARKEN TAVAN BİRAZ YÜKSELİR. Ölçüldü (360x640, kirşof 4. adım):
   üç şıklı soru 280 px istiyor, tavan 255 px'ti ve ÜÇÜNCÜ ŞIK ekranın
   altında kalıyordu — öğrenci ona dokunamıyordu. Tavan yalnız soru
   sorulurken yükseliyor; büyük ekranda kumandanın kendi boyu zaten daha
   kısa olduğu için bu satırın oralarda hiçbir etkisi yok (1366x768'de
   kumanda 146 px). */
.dock.soruyor{max-height:50vh}
/* SERBEST DENEY KİPİ. Kaydıraçlar kumandanın asıl şişeni: 360x640'ta
   dört kaydıraç + okunuş kutusu 306 px istiyor, 40vh tavanı 256 px'ti ve
   sonuncusu ekranın altında kalıyordu (MEHMET bunu 10 Eylül'de de
   bildirmişti: "kirşofta hiç görünmüyorlar"). Bu kipte tavan 50vh;
   büyük ekranda kumandanın kendi boyu daha kısa olduğu için etkisi yok. */
.dock.deneyde{max-height:50vh}
.tabs{flex:0 0 auto;display:flex;gap:8px;background:var(--bg);padding:5px;border-radius:14px;align-self:center}
.tab{
  min-height:calc(var(--tap) - 12px);padding:0 clamp(16px,2vw,32px);
  border-radius:10px;font-size:var(--fs-btn);font-weight:600;color:var(--text-dim);
  transition:background .15s,color .15s;
}
.tab[aria-selected="true"]{background:var(--accent);color:var(--bg)}

.panel{display:none}
.panel.active{display:block}

/* --- anlatım paneli --- */
.narrate{display:flex;align-items:center;gap:var(--gap)}
.navbtn{
  flex:0 0 auto;height:var(--tap);min-width:calc(var(--tap)*2.1);
  border-radius:14px;background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--fs-btn);font-weight:700;color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s,opacity .15s;
}
.navbtn:hover:not(:disabled){background:var(--line)}
.navbtn:disabled{opacity:.32;cursor:default}
.navbtn.primary{background:var(--accent);color:var(--bg);border-color:transparent}
.navbtn.primary:hover{filter:brightness(1.08)}
.script{flex:1 1 auto;min-width:0}
.script .k{font-size:var(--fs-sub);color:var(--accent);font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.script .t{font-size:var(--fs-step);font-weight:600;line-height:1.3;margin-top:2px}
/* AÇIKLAMA EN ÇOK 3 SATIR. Uzun bir açıklama kumandayı şişirip sahneyi
   eziyordu; kutu artık sabit yüksekliğe oturuyor, kalanı adımın kendisi
   sahnede gösteriyor. */
.script .d{font-size:var(--fs-body);color:var(--text-dim);line-height:1.4;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dots{flex:0 0 auto;display:flex;gap:7px;align-items:center}
.dot{width:11px;height:11px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s}
.dot.on{background:var(--accent);transform:scale(1.35)}

/* --- TAHMİN. Öğrenmenin olduğu yer burası: önce söyle, sonra bak.
       Ölçüyle değil gözlemle konuldu — eski tarzda öğrencinin yanılma
       imkânı hiç yoktu, dolayısıyla düzeltilecek bir fikri de olmuyordu. */
.tahmin{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap}
.tahmin .soru{font-size:var(--fs-step);font-weight:600;flex:1 1 260px;min-width:0}
.tahmin .secenekler{display:flex;gap:10px;flex-wrap:wrap}
.tahmin button{
  min-height:var(--tap);padding:0 clamp(14px,1.6vw,26px);border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--fs-btn);font-weight:600;color:var(--text);
  transition:background .15s,border-color .15s;
}
.tahmin button:hover:not(:disabled){background:var(--line)}
.tahmin button.dogru{background:var(--accent);color:var(--bg);border-color:transparent}
.tahmin button.yanlis{background:#3A1F22;border-color:var(--uyari);color:#FFC9BC}
.tahmin .karsilik{font-size:var(--fs-body);color:var(--text-dim);flex:1 1 100%;line-height:1.4}

/* --- deney paneli --- */
.lab{display:flex;gap:var(--gap);align-items:flex-end;flex-wrap:wrap}
.field{flex:1 1 200px;min-width:180px}
/* Seçim kutusu gibi geniş alanlar. Genişlik SATIR düzeninde anlamlı;
   sütun düzeninde (aşağıdaki dar ekran kuralı) bu satır geçersiz kalıyor. */
.field.genis,.field.genis-tam{flex:0 0 var(--alan-en,280px)}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-sub);color:var(--text-dim);margin-bottom:6px}
.field label b{font-size:var(--fs-body);color:var(--text);font-variant-numeric:tabular-nums}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--line);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:34px;height:34px;border-radius:50%;
  background:var(--accent);border:4px solid var(--surface);cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb{
  width:34px;height:34px;border-radius:50%;background:var(--accent);
  border:4px solid var(--surface);cursor:pointer;
}
/* SEÇİM DÜĞMESİ KIRILMAZ, KOMŞUSUNA BİNMEZ (denetim 01, K5). Etiket 4-5
   satıra kırılıp yandaki kaydıracın üstüne taşıyordu. Şimdi her düğme tek
   satır; sığmayan düğme alt satıra, sığmayan alan bir sonraki satıra iner
   (`min-width:auto` = en geniş düğme kadar). */
.seg{display:flex;flex-wrap:wrap;gap:6px;background:var(--bg);padding:5px;border-radius:12px}
.seg button{
  flex:1 1 auto;min-height:44px;padding:0 14px;border-radius:8px;
  font-size:var(--fs-sub);font-weight:600;color:var(--text-dim);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--accent)}
.field.genis,.field.genis-tam{min-width:auto}

/* DÜĞME GİBİ GÖRÜNEN DÜĞME (denetim 01, K4). "Yıldırımı tetikle",
   "Flaş patlat" çerçevesiz düz yazıydı; çocuk basılacağını anlamıyordu. */
.dugme{
  min-height:48px;padding:0 22px;border-radius:12px;
  background:var(--surface-2);border:2px solid var(--accent);color:var(--text);
  font-size:var(--fs-btn);font-weight:700;white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.45);
}
.dugme:hover{background:var(--line)}
/* Adımı tekrarla (↺) ve deneyi baştan başlat: küçük, yer yemez (26 Eylül). */
.navbtn.tekrar{flex:0 0 auto;min-width:var(--tap);padding:0 12px;font-size:1.35rem}
.bastan-dugme{padding:0 16px}
/* Tehlikeli eylem (yıldırımı tetikle, kısa devre et): kırmızı. */
.dugme.dugme-uyari{border-color:var(--uyari);background:#3A1F22;color:#FFD9D0}
.dugme:active{transform:translateY(2px);box-shadow:none}

/* DENEY İPUCU ŞERİDİ (denetim 01, K6). Çizimin üstünde değil, kumandaların
   hemen üstünde. İlk dokunuştan sonra tek satıra iner. */
.deney-ipucu{
  font-size:var(--fs-sub);color:var(--accent);line-height:1.35;
  padding:0 2px calc(var(--gap)*.6);
}
.deney-ipucu.kucuk{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.75}

/* --- OKUNUŞ KUTUSU. Tek sonuç, dev punto. Eski tarzda beş satırlık bir
       tablo vardı ve hiçbiri öne çıkmıyordu; öğrenci nereye bakacağını
       bilmiyordu. Buraya en çok üç sayı girer. */
.readout{
  flex:0 0 auto;display:flex;gap:clamp(14px,1.6vw,32px);align-items:stretch;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  padding:10px clamp(14px,1.6vw,26px);
}
/* Sonuç vermeyen sahnede kutu boş bir oval olarak kalıyordu (denetim 01, K3:
   60 sahnede 46x22 px, etiketsiz). */
.readout:empty{display:none}
/* Okunamayacak kadar küçülen yardımcı yazı (multimetre yuva harfleri). */
#sahne text[data-kucuk]{display:none}
/* SABİT GENİŞLİK. Yazı uzadıkça kutu büyürse aynı satırdaki kaydıraç
   kayıyor ve öğrenci sürüklerken kaydırağı kaybediyor (MEHMET, 10 Eylül).
   Bölme kendi payını en baştan alıyor, içeriği değişse de kıpırdamıyor. */
.ro{text-align:center;white-space:nowrap;
  min-width:clamp(92px,8.5vw,148px);
  display:flex;flex-direction:column;justify-content:center}
.ro .v{font-size:var(--fs-num);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.ro .l{font-size:var(--fs-sub);color:var(--text-mute);margin-top:2px}
.ro.force .v{color:var(--force)}
.ro.dir   .v{color:var(--accent)}
.ro.uyari .v{color:var(--uyari)}

/* ------------------------------------------------------------------- liste */
#liste{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--gap);
  display:flex;flex-direction:column;gap:10px}
#liste a{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:inherit;
  min-height:var(--tap);transition:border-color .15s,background .15s;
}
#liste a:hover{border-color:var(--accent);background:var(--surface-2)}
#liste .ad{font-weight:700;font-size:var(--fs-body);margin-inline-end:.6rem}
#liste .alt{font-size:var(--fs-sub);color:var(--text-mute)}

@media (max-height:720px){
  :root{--tap:52px; --gap:clamp(8px,.8vw,14px)}
  .dock{max-height:40vh}
  .script .d{-webkit-line-clamp:2}
}
/* KISA EKRAN + SORU. Ölçüldü (360x640, dogru-akim-kaynaklari 2. adım):
   soru satırı 346 px istiyor, tavan 319 px'ti ve "İki katına yükselir"
   şıkkı ekranın 20 px altında kalıyordu. Kısa ekranda soru sorulurken
   adım sayacı ve başlığı da gizleniyor — o anda öğrencinin işi soru,
   başlık bir önceki ekranda zaten okundu. 69 px kazanıyor, şık ekrana
   giriyor. Büyük ekranda bu satırın etkisi yok (orada tavan zaten
   bağlamıyor). */
@media (max-height:700px){
  .dock.soruyor .script .k,
  .dock.soruyor .script .t{display:none}
  .dock.soruyor .script{display:none}
  .dock.soruyor .tahmin .soru{font-size:1rem}
}
/* Uzun dar ekran (telefon dikey): kumanda daha da kısılsın, sahne nefes alsın. */
/* ÇOK KAYDIRAÇLI SAHNE TELEFONDA: İKİ SÜTUN.
   Dört kaydıraç alt alta dizilince kumanda 390 px'lik ekranda tavanı
   aşıyor ve sonuncusu görünmüyordu. İki sütuna geçince satır sayısı
   yarıya iniyor. Seçim kutusu ve okunuş kutusu tam genişlikte kalıyor —
   onlar bölünürse okunmuyor. */
@media (max-width:520px){
  .lab{display:grid;grid-template-columns:1fr 1fr;
       column-gap:calc(var(--gap)*.7);row-gap:calc(var(--gap)*.55);align-items:end}
  .lab > .field{min-width:0}
  .lab > .field.genis-tam,.lab > .readout{grid-column:1 / -1}
}
@media (max-width:700px){
  /* Dört kaydıraçlı sahnede (kirşof, dc-kaynak) kumandanın doğal boyu
     ~350 px. Tavan onun biraz üstünde: hiçbir kaydıraç ekran altında
     kalmıyor, sahneye de 430 px kalıyor. Ölçülerek seçildi. */
  .dock{max-height:40vh}
}
/* TELEFON. Alt kumanda 360 px'te satıra sığmıyordu: "ADIM 3 / 7" alt alta
   diziliyor, başlık kırılıyor, düğmeler taşıyordu. Anlatım satırı burada
   iki kata iniyor — metin üstte, düğmeler altta. Ölçülerek konuldu. */
@media (max-width:700px){
  :root{--tap:48px}
  /* Başlık tek satır (denetim 01, K7): rozet, başlık, tam ekran aynı satırda. */
  .titles h1{font-size:1.05rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .titles p{display:none}
  .dock{padding:calc(var(--gap)*.8);gap:calc(var(--gap)*.7)}
  .topbar{flex-wrap:wrap}
  .tabs{order:3;flex:1 1 100%;align-self:stretch}
  .tab{flex:1 1 0;padding:0 8px;font-size:.95rem}
  .narrate{flex-wrap:wrap;gap:10px}
  .script{flex:1 1 100%;order:-1}
  .script .t{font-size:1.05rem;line-height:1.25}
  .dots{display:none}
  .navbtn{flex:1 1 40%;min-width:0;font-size:1rem}
  .tahmin .soru{font-size:1.02rem;flex:1 1 100%}
  .tahmin button{flex:1 1 40%;font-size:.95rem;padding:0 10px}
  .readout{flex:1 1 100%;justify-content:space-around;padding:8px 10px}
  .ro .v{font-size:1.15rem}
}
@media (max-width:900px){
  /* DİKEY DİZİLİNCE `flex:1 1 200px` FELAKET. Sütun yönünde bu "boyun 200 px
     olsun ve artan yeri de sen doldur" demek: iki kaydıraç kumandanın
     tamamına yayılıp aralarında kocaman boşluk bırakıyordu (MEHMET:
     "sürükleme butonları ekranın yarısını kaplıyor"). Dikeyde büyüme yok. */
  .lab{flex-direction:column;align-items:stretch;gap:calc(var(--gap)*.55)}
  /* DİKEYDE HİÇBİR ŞEY BÜYÜMEZ. `flex:1 1 200px` ve `flex:1 1 100%` sütun
     yönünde "boyun bu kadar olsun, artanı da al" demek; kirşof'ta deney
     paneli 569 px'e çıkıyordu (ölçüldü). Kaydıraç da okunuş kutusu da
     kendi doğal boyunda kalır. */
  .lab > *{flex:0 0 auto;min-width:0}
  .lab > .field.genis,.lab > .field.genis-tam{flex:0 0 auto}   /* genişlik sütunda geçersiz */
  .readout{flex:0 0 auto;width:100%}
  .field label{margin-bottom:0;font-size:.84rem;line-height:1.25}
  .seg button{min-height:46px}
  .readout{justify-content:space-around}
  .tahmin .karsilik{display:none}
}
/* Dik dar ekranda açıklama yok; YATAY TELEFONDA İKİ SATIR (denetim 01, K7:
   844x390'da adım açıklaması hiç görünmüyordu). Yeri açmak için sayaç
   ("ADIM 2 / 4") ve kaynak satırı gizleniyor: ilerlemeyi noktalar söylüyor. */
@media (max-width:900px) and (orientation:portrait){
  .script .d{display:none}
}
@media (max-height:500px) and (orientation:landscape){
  /* K11 (denetim 06): adım metni "…" ile kesiliyordu; üç satır. */
  .script .d{-webkit-line-clamp:3;font-size:.85rem;line-height:1.25;margin-top:2px}
  .script .k{display:none}
  .script .t{font-size:1.05rem}
  .titles p{display:none}
  .titles h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.15rem}
  .su-yazi{display:none}
  .su-dugme{padding:0 12px;min-height:44px}
  .topbar{padding:4px var(--gap)}
  .tab{min-height:40px}
  .iconbtn{width:44px;height:44px}
  .dock{padding:8px var(--gap)}
  /* YATAY TELEFONDA KUMANDA YAN YANA (25 Eylül, K7 kararından sonra yatay
     asıl telefon ekranı). Yukarıdaki 900 px kuralı kaydıraçları alt alta
     diziyordu: ohm serbest deneyinde kumanda ekranın yarısını alıyor, çizim
     130 px'e iniyor, yazı küçülüp biniyordu. Burada satır düzenine dönülür,
     ipucu tek satır. */
  /* K11: kumandalar TEK SATIRDA, sığmazsa yana kayar (kumanda paneli
     ekranın yarısını almasın). */
  .lab{display:grid;grid-auto-flow:column;grid-auto-columns:min-content;grid-template-rows:auto auto;
       column-gap:var(--gap);row-gap:4px;align-items:end;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px}
  .lab > *{width:210px;min-width:0;grid-row:2}
  .lab > .field.genis,.lab > .field.genis-tam{width:max-content}
  /* Sonuç üst satırda tek başına (kaymadan görünür), kumandalar alt satırda yan yana kayar. */
  .lab > .readout{grid-row:1;grid-column:1 / span 12;width:auto;justify-self:start}
  /* Anlatımda ipucu ile "Kendin dene" aynı satırda (ayrı satır 48 px yiyordu). */
  .adim-ipucu{flex-wrap:nowrap;margin-top:2px}
  /* K11: ipucu iki satıra kadar. */
  .adim-ipucu > span{flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;overflow:hidden;font-size:.8rem;line-height:1.2}
  .dene-dugme{min-height:36px;padding:0 10px}
  /* İpucu ve arıza avı aynı satırda; okunuş kutusu tek satır boyunda. */
  .deney-ipucu{display:-webkit-inline-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    vertical-align:middle;max-width:58%;overflow:hidden;font-size:.8rem;line-height:1.2;padding:0 8px 4px 2px}
  .ariza-serit{display:inline-flex;vertical-align:middle;max-width:41%;flex-wrap:nowrap;gap:8px;padding:0 0 4px}
  .ariza-serit .dugme{min-height:36px;padding:0 12px}
  .ariza-yazi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .dugme,.seg button{min-height:40px}
  .field label{margin-bottom:0}
  .readout{padding:4px 10px}
  .ro{min-width:0;flex-direction:row;align-items:baseline;gap:6px;justify-content:center}
  .ro .v{font-size:1.05rem}
  .ro .l{font-size:.75rem;margin-top:0}
}