<!--
  STAGE.HTML — DEĞİŞİKLİK GÜNLÜĞÜ (en üstte tutulur; her önemli özellik değişikliğinde güncellenir)
  - 2026-08-20: 🔓 SAHNE YENİ GÖRÜNÜRLÜK MODELİNE GEÇTİ (3. aşamanın stage ayağı).
    Bu dosyadaki ÜÇ yer hâlâ eski modeli (owner_id / group_id / is_public)
    kullanıyordu; oysa görünürlük 2. aşamada `repertoires.visibility` +
    `repertoire_group_shares` + `repertoire_shares`'e taşınmış ve
    `repertoires_read` politikası hepsini çözüyor.
    (a) repVisibilityQuery() artık BOŞ dönüyor — sunucu sorgusundan istemci
        süzgeci kalktı; RLS üst sınır olduğu için fazladan satır GELMEZ,
        yalnız eski kuralın yanlışlıkla eledikleri geri gelir.
    (b) repVisibilityFilterFn() pass-through oldu — IndexedDB'ye zaten yalnız
        RLS'ten geçmiş satırlar yazılıyor. Eski kural, kişisel paylaşımla bana
        açılmış bir repertuvarı (visibility='private' + repertoire_shares satırı)
        önbellekte DURDUĞU HÂLDE eliyordu.
    (c) buildRepsFromRaw'daki görünürlük süzgeci kaldırıldı; yalnız kullanıcının
        kendi gizlediği (hiddenRepIds) BAŞKASINA AİT satırlar eleniyor.
    Aynı düzeltmeler repertoires.js'te de yapıldı — iki sayfa yine aynı kapsamı
    görsün diye (2026-08-12'de bu ikisinin çelişmesi zaten bir hataya yol açmıştı).
    Works tarafına DOKUNULMADI: loadWL zaten select=* çekiyor ve 08-19'da jeton
    öncelikli hâle getirilmişti, istemci görünürlük süzgeci yok.
  ⚠️ NOT (2026-08-13): Bu başlık 07-29'dan 08-13'e kadar GÜNCELLENMEMİŞTİ; oysa
  dosyada 08-06 (panelin bloklara ayrılması, yazı boyutunun panele taşınması,
  akor yazımı seçicisi) ve 08-12 (canlı güncelleme şeridi) değişiklikleri var.
  Yani "son madde eski görünüyor" diye dosyayı eski sanma — kontrol için
  st-grp / setAkorYazimi / showStageChangeBar aranmalı.
  - 2026-08-19 (5): 🐞 iPad'DE TUŞLAR SAYFAYA HİÇ ULAŞMIYORDU — ODAK BOŞTAYDI.
    Ayırt edici gözlem: pedal iPad'de NOTLAR uygulamasında imleci oynatıyor
    (yani iPad'e klavye olarak konuşuyor) ama tarayıcıdaki ?pedaltest=1 şeridi
    sessiz kalıyor. iOS'ta sayfada odaklanmış bir öğe yoksa donanım klavyesi
    olayları web sayfasına düşmüyor. Bir önceki turda sahneye geçerken
    blur() çağırıyorduk (seçicideki arama kutusu tuşları yutmasın diye);
    masaüstünde zararsızdı, iPad'de tuşları tamamen kesiyordu. Artık odak
    bırakılmıyor, sahne kabına VERİLİYOR: stageScreen'e tabindex="-1" eklenip
    focus({preventScroll:true}) çağrılıyor. Böylece hem arama kutusu odağı
    bırakıyor hem sayfa klavye olaylarını almaya devam ediyor.
  - 2026-08-19 (4): 🐞 ODAK KONTROLÜ PEDALI YUTUYORDU. Emir: pedal (Lekato WT-6)
    DAHA ÖNCE ÇALIŞIYORDU, bu turdan sonra durdu — yani sorun tuş listesinde
    değil, aynı turda eklenen odak korumasındaydı. Seçici ekranındaki arama
    kutusu odakta kalınca (sahneye geçilse bile odak orada kalabiliyor) pedalın
    ok tuşları "metin kutusuna ait" sayılıp yok sayılıyordu. İki katmanlı
    düzeltme: (a) _yaziAlanindaMi() artık yalnız GÖRÜNÜR bir kutuyu sayıyor
    (gizli ekranda kalmış input'un offsetParent'ı null) ve sahne açıkken
    yalnızca SAHNE İÇİNDEKİ kutu tuşu sahipleniyor; (b) showScreen('stageScreen')
    geçişinde odak bırakılıyor (blur).
  - 2026-08-19 (3): SEÇİCİ EKRANI ARTIK BİR AN GÖRÜNMÜYOR + PEDAL TEŞHİS MODU.
    (a) "Sahne modunda aç" ile gelindiğinde repertuvar seçici bir an görünüp
        kapanıyordu ("kirli bir durum" — Emir). Sebep sıralamaydı: seçici
        koşulsuz gösterilip çiziliyor, SONRA localStorage'daki stageRepId
        okunup 100 ms'lik zamanlayıcıyla sahneye geçiliyordu. Artık önce hedef
        repertuvar aranıyor; varsa seçici HİÇ gösterilmiyor ve gecikme yok.
    (b) Pedal geniş tuş listesine rağmen çalışmıyor. iPad'de konsol açmak zor
        olduğu için ?pedaltest=1 ile açılan bir teşhis şeridi eklendi: her
        keydown/keyup'ta key/code/keyCode/repeat ve odaktaki öğe ekrana yazılır.
        Pedala basınca HİÇBİR ŞEY yazmıyorsa sorun tuş listesinde değil,
        pedalın klavye olarak eşleşmemesinde ya da odaktadır.
  - 2026-08-19 (2): KALAN ANON İSTEKLER DE JETONA GEÇTİ. Aynı dosyada üç yer
    daha anon anahtarla soruyordu: (a) works referans verisi — RLS artık anon'a
    yalnız visibility='public' eserleri verdiği için repertuvardaki gizli/gruba
    açık eserlerin güfte-akoru sahnede BOŞ kalıyordu; artık önce jetonla
    deneniyor, istek başarısızsa (süresi dolmuş jeton) anon'a düşülüyor, yani
    eski dayanıklılık da korunuyor. (b,c) ?share= bağlantısı — giriş yapmış biri
    bağlantıyı açtığında kendi yetkisiyle okuyor (kişisel paylaşım ya da grup
    paylaşımı artık açılabiliyor); jeton yoksa H zaten anon'a düştüğü için
    ziyaretçi davranışı değişmiyor.
  - 2026-08-19: 🐞 SAHNE SUNUCUYA ANONİM SORUYORDU. Admin, Repertuvarlar'dan
    kendi özel repertuvarını seçip "Sahne modunda aç" dediğinde sahnedeki
    listede yalnızca GENEL repertuvarlar çıkıyordu. Sebep: ortak `H` başlık
    nesnesi Authorization olarak kullanıcının oturum jetonu yerine ANON ANAHTARI
    gönderiyordu; RLS için bu "giriş yapmamış ziyaretçi" demek, dolayısıyla
    repertoires_read'den yalnız visibility='public' satırlar dönüyordu. Kendi
    özel/grup repertuvarların ve kişisel paylaşımlar sunucudan hiç gelmiyordu.
    Şimdiye kadar fark edilmemesinin sebebi loadReps()'in önce yerel IndexedDB
    önbelleğinden dönmesi — önbellek boşsa (özel pencere, yeni cihaz, temizlenmiş
    depo) sahne çıplak kalıyor. H artık her istekte localStorage['sb_token']
    okuyor (aynı desen kişisel akor isteğinde zaten kullanılıyordu).
  - 2026-08-19: PEDAL DESTEĞİ GENİŞLETİLDİ. "iPad'de pedal çalışmıyor" şikâyeti;
    sahne kodunun geri kalanı sağlamdı (swipe ve ok tuşları çalışıyordu), eksik
    olan TUŞ LİSTESİYDİ. Bluetooth nota çevirme pedallarının çoğu varsayılan
    modda PageDown/PageUp gönderir; bazı modlar Enter, Backspace, nokta/virgül
    ya da a/b kullanır. Artık hepsi tanınıyor. Ayrıca 250 ms debounce (bazı
    pedallar tek basışta iki sinyal üretiyor → iki eser atlanıyordu), e.repeat
    yok sayılıyor (basılı tutunca repertuvarın sonuna uçuluyordu) ve imleç bir
    metin kutusundaysa tuş sahne gezinmesine gitmiyor.
  - 2026-08-13 (7): KARAR SESİ ARTIK KULLANICININ YAZIMIYLA GÖSTERİLİYOR.
    F# girilmiş bir eserde akorlar F#m/Bm/E görünürken rozette "Gb (Solb)"
    yazıyordu — aynı ekranda iki yazım. Sebep: _KARAR_LATIN/_KARAR_TR yalnızca
    bemol tablosuydu, indeks 6 her hâlükârda Gb'ye çevriliyordu. Yeni diyez
    tabloları (_KARAR_LATIN_D/_KARAR_TR_D) + _kararJeton/_kararDiyezMi ile
    KAYDIRMA YOKKEN kullanıcının diyez/bemol tercihi korunuyor; ton
    kaydırıldığında bemol tablosuna dönülüyor, çünkü kaydırılmış akorlar da
    bemolle yazılıyor (transposeNote → _CHROM_FLAT) ve ikisi tutarlı kalmalı.
    Etkilenen yerler: kararLabel (başlık altı rozeti) ve tonSesAdi (Ton düğmesi
    + kaydırıcı kutusu).
  - 2026-08-13 (6): SÖZ ALANI ARTIK GERÇEKTEN KAYDIRILIYOR. Masaüstünde fare
    tekerleği çalışmıyordu, uzun eserin başına/sonuna gidilemiyordu. Sebep CSS:
    .sm bir flex öğesi ve flex öğelerinin varsayılan min-height'ı AUTO, yani öğe
    içeriğinden kısa olamıyor — .sm içerik kadar uzuyor, overflow-y:auto hiç
    devreye girmiyor, taşan kısım body'nin overflow:hidden'ı ile kırpılıyordu.
    .sm'ye min-height:0 eklendi (aynı düzeltme .pi-scroll'da zaten vardı) +
    overscroll-behavior:contain. Ayrıca @media(pointer:fine) ile fareli
    cihazlarda ince kaydırma çubuğu görünür yapıldı (dokunmatikte gizli kalır);
    çubuk gizliyken kaydırılabildiği anlaşılmıyordu.
  - 2026-08-13 (5): SAHNEDEN ÇIKIŞ TEK DOKUNUŞ. Görünüm Ayarları paneline
    "SAHNE" bloğu eklendi: Geri Dön · Ana Sayfa · Sahneden Çık (kırmızı),
    dikey ve YAZILI (.st-grp-col + .st-act / .st-act-exit, grup()'a üçüncü
    "dikey" parametresi). "Görünüm" bloğundaki ☰ düğmesi (navBtn) KALDIRILDI —
    o düğme alttaki v2StageBotNav şeridini açıyordu, yani çıkmak için ikinci bir
    dokunuş gerekiyordu ve ikon ne yaptığını anlatmıyordu (Emir: "bilmeyen için
    muamma"). openStageNav / #v2StageBotNav dosyada DURUYOR (Escape yolu +
    :818'deki gizli yedek düğme); yalnızca panelden çağrılmıyor.
    Panel blok sırası: Hizalama · Yazı Boyutu · Ton · Akor Yazımı · Görünüm · Sahne.
  - 2026-08-13 (4): iOS SAFARI'DE ÇİFT DOKUNUŞ YAKINLAŞTIRMASI KAPATILDI. Ton
    düğmesine hızlı iki kez basınca sayfa yakınlaşıp yazılar büyüyordu; sebep
    Safari'nin user-scalable=no'yu yok sayması. Etkileşimli öğelere (düğmeler,
    kaydırıcılar, panel) touch-action:manipulation eklendi. Pinch zoom ve nota
    alanında çift dokunuş bilerek korundu.
  - 2026-08-13 (3): İŞARET RENGİ AKORDAN AYRILDI. "2X" rozeti (.cp-rep) ve bölüm
    başlıkları (.cp-comment) var(--accent) kullanıyordu ve sahnede akorlarla aynı
    okunuyordu. Yeni değişken: --marker-color (karanlık #8FA6FF, açık #3F3BC0).
    Artık üç katman üç renk: SÖZ beyaz, AKOR altın, İŞARET mavi-mor. NOT: aynı
    sınıflar eserler.html'de de var, orada da değiştirilmeli.
  - 2026-08-13 (2): PANEL YARI SAYDAM + YAZILAR AÇILDI. Görünüm Ayarları paneli
    artık sözleri tamamen örtmüyor: zemin rgba(14,14,26,.78) + backdrop-filter
    blur(16px) (gündüz teması ayrı; bulanıklık desteklenmiyorsa .94'e düşer).
    Zemin/çerçeve INLINE stilden CSS'e taşındı (inline sınıfı ezdiği için).
    Blok başlıkları (#stageToolsPanel .st-grp-lbl) --text3 (#3d3d58, kontrast
    1.8:1 — karanlıkta okunmuyordu) yerine #bfbdd6; düğme ikonları #d3d1e6.
    Renkler ölçülerek seçildi: panel beyaz söz metninin üstüne geldiğinde bile
    etiket 5.6:1, ikon 6.8:1 (WCAG AA üstü). --text3 başka yerlerde aynı kaldı.
  - 2026-08-13: TON KONTROLÜ RAKAM DEĞİL SES ADI. Görünüm Ayarları'ndaki Ton
    bloğu artık kapalıyken TEK DÜĞME ve üstünde o an çalınan karar sesi yazıyor
    ("La" / "A"); dokununca ◀ kaydırıcı ▶ + canlı ses adı kutusu açılıyor,
    seçimden ~3 sn sonra kendiliğinden kapanıyor (tonKaydiriciAc /
    tonSliderInput / tonSliderCommit / tonNudge / tonKapanmayiPlanla, durum:
    _tonAcik + _tonAcikWid). Kaydırıcı KROMATİK (−6…+6), rayın ORTASI eserin
    özgün tonu, dolgu ortadan başlıyor. Ses adının yazımı akorlarla aynı
    tercihe bağlı (akorYazim → ABC / Do Re Mi). SÜRÜKLERKEN AKORLAR YENİDEN
    ÇİZİLMEZ (yalnızca kutu + dolgu); asıl uygulama parmak kalkınca (change).
    Karar sesi yok/tanınmıyorsa eski ± adımlayıcıya düşülür. AYRICA: panelde
    başlayan dokunuşlar artık swipe sayılmıyor (_swipeYoksay) — kaydırıcıyı
    60px'den fazla çekmek ESER ATLATIYORDU, yazı boyutu kaydırıcısında da
    aynı hata vardı, ikisi birden düzeldi.
  Bu bloğun amacı: Claude'a dosya yapıştırıldığında, kodun BEKLENEN en güncel halini
  taşıyıp taşımadığını satır satır okumadan tek bakışta anlamak. Yapıştırılan kodda
  aşağıdaki son maddenin karşılığı yoksa, bu muhtemelen eski bir kopya demektir —
  GitHub'daki gerçek dosyayı tekrar çekip öyle paylaş.
  - 2026-07-29 (2): AKORLARIN ÜST ÜSTE BİNMESİ ÇÖZÜLDÜ. width:0 sonrası akor
    metni layout'ta yer kaplamadığı için dar hecelerin üstünde akorlar görsel
    olarak çakışıyordu. Render sonrası koruyucu eklendi
    (window.cpFixChordOverlaps): akorların gerçek metin genişliği Range ile
    ölçülüp çakışanlar transform:translateX ile sağa kaydırılıyor — transform
    layout'u değiştirmediği için güfte etkilenmiyor. MutationObserver +
    ResizeObserver + resize/orientationchange + fonts.ready ile tetikleniyor
    (sahnede yazı boyutu/ölçek değişince de yeniden hesaplanır); satır
    sarmasında her görsel satır için sayaç sıfırlanır.
  - 2026-07-29: AKOR ARTIK GÜFTEYİ BOZMUYOR. Belirti: sahnede kelimeler ortadan
    yarılıyordu ("varıl maz", "gizli giz li", "öter ken") ve yer yer akorlar
    birbirine yapışıyordu. SEBEP CSS: .cp-seg inline-block olduğu için genişliği
    max(akor, hece) idi — akor heceden genişse segment akor kadar genişliyor,
    hece ile sonraki hece arasında boşluk açılıyor, sonraki akor da bitişikte
    başlıyordu. Çevirici (_mergeChordLyric) masum: akor dizileri kaynakla birebir
    aynıydı. DÜZELTME: .cp-chord{width:0} → akor genişliğe katkı vermez, metni
    sağa taşar, dikey yeri min-height ile durur; güfte hiç bozulmaz.
    renderChords artık heceye bağlı OLMAYAN akorlara (lyric boş/boşluk)
    .cp-tail sınıfı basıyor; o segmentlerde akor genişliğini + .7em boşluğu
    korur, böylece satır sonundaki ardışık akorlar yapışmaz.
  - 2026-07-28: GÜFTENİN ÜST ÜSTE BİNMESİ DÜZELTİLDİ (sahneye ilk girişte üstteki
    2-3 satır ortalanmış+büyük, altı sola yaslı+küçük görünüyor ve çakışıyordu;
    sayfa yenilenince geçiyordu). SEBEP çift render DEĞİL — renderStage zaten
    innerHTML ATIYOR ve _refreshAfterWorks yalnız placeholder varken yeniden
    çiziyor. Gerçek sebep TEK render'ın İKİ KAREYE yayılmasıydı: içerik basılıyor
    (.wlyrics varsayılan text-align:center + opacity animasyonu ile), hizalama
    ise requestAnimationFrame ile BİR SONRAKİ karede uygulanıyordu; --lyrics-scale
    de ondan sonra yazılıyordu. İlk kare ortalanmış+eski ölçekte boyanıyor,
    sonraki karede metin sola yaslı+yeni ölçekte yeniden akıyor; opacity
    animasyonu katmanı compositor'a taşıdığı için iOS Safari yeniden akışı kısmen
    boyayıp üstteki satırları eski halinde bırakıyordu. DÜZELTME: renderStage
    içinde sıra değişti — önce --lyrics-scale yazılıyor, sonra innerHTML, sonra
    AYNI KAREDE setLyricsAlign (requestAnimationFrame kaldırıldı) + slider UI.
    Kayıtlı hizalama 'left' iken (ya da ölçek 1'den farklıyken) ortaya çıkıyordu.
  - 2026-07-20: ÇOK SAYFALI NOTA SAHNEDE (eserler.html'deki works.nota_pages ile
    birlikte gelir). WL kaydına notaPages eklendi (nota_pages dizisi; boşsa tek
    nota_url'e düşer) — works fetch'i zaten select=* olduğu için ek istek YOK.
    Yeni: stageNotaPages(w) / currentNotaPages() / notaViewHtml(pages,i) /
    notaGoPage(i) / notaStepPage(dir) / notaPreloadNext() ve _notaPage,
    _notaWorkKey, _notaEnterFromEnd durumu. DAVRANIŞ: nota görünümünde ileri/geri
    ÖNCE sayfa çevirir, son sayfadan sonra SONRAKİ ESERE geçer; ilk sayfadan
    geriye gidince ÖNCEKİ ESERİN SON SAYFASI açılır. Tek yol: swipe, klavye/pedal
    (→ ␣ ↓ / ← ↑) ve yan oklar artık sideNavNext/Prev'i değil nextWork/prevWork'ü
    çağırır. UI: sağ üstte "2 / 3" rozeti (.nota-count) + altta pager
    (.nota-pager: ‹ · noktalar · ›, noktaya basınca o sayfaya atlar). Sonraki
    sayfa new Image() ile önden yüklenir (sahnede bekleme olmasın). Sayfa
    değişimi renderStage'i TAMAMEN yeniden çizmez, yalnız #sm içeriğini
    değiştirir. getStageViewMode/setViewMode/updateViewToggleUI'daki !w.notaUrl
    kontrolleri stageNotaPages(w).length'e çevrildi. PDF notada sayfa geçişi YOK
    (pdf.js gerekir) — kullanıcıya sayfa başına görsel yüklemesi öneriliyor.
  - 2026-07-15: Sahne modunda A−/A+ butonları kaldırıldı, yerine sürükleyerek
    büyütüp küçülten TEK bir font boyutu bar'ı (range slider, #lyricsFontSlider)
    kondu — sağ altta. Ayarlar (⚙️) butonu sola taşındı. Fonksiyonlar:
    setLyricsFontScale(), updateFontSliderUI() — eski adjustLyricsFontSize()/
    updateFontSizeButtons() YERİNE geçti, ikisi birden var olmamalı.
  - 2026-07-16: (1) GÜFTE TAM GENİŞLİK — .wtitle/.wnote/.wlyrics üzerindeki
    700px/600px max-width tavanları kaldırıldı (max-width:100%), .sm yan
    padding'i küçültüldü; güfte artık ekranın kenarına kadar açılıyor.
    (2) SÖZ/AKOR/NOTA yatay bar (.view-switch-wrap) KALDIRILDI, yerine üst
    sağda bilgi ikonunun yanında açılır MENÜ geldi: #viewModeBtn + #viewModeMenu
    (.vm-menu/.vm-item), toggleViewModeMenu()/closeViewModeMenu(). Aktif moda
    göre üstteki ikon değişir; tek mod varsa buton gizlenir.
    (3) GÜVENLİ SAYFA ATLATMA — .sm üzerindeki onclick="nextWork()" KALDIRILDI
    (güfteye dokununca artık sayfa atlamıyor). Sol/sağ .side-nav-btn butonları
    büyütülüp güvenli dokunma alanı haline getirildi; sadece onlara dokununca
    sayfa atlıyor. (Swipe ve pedal/klavye navigasyonu aynen çalışıyor.)
  - 2026-07-16 (b): (1) ALT NAVBAR sahne modunda yukarı-swipe ile açılması
    kaldırıldı (openStageNav artık touchend'de çağrılmıyor) — güfteyi kaydırırken
    kazara açılıp alt barı örtmüyor. Çıkış hâlâ Görünüm Ayarları (⚙) menüsündeki
    liste butonuyla mümkün. (2) YAZI BOYUTU: kaydırıcının iki yanındaki "A"
    etiketleri artık tıklanabilir A−/A+ butonları (stepLyricsFont(±0.1),
    setLyricsFontScale'i kullanır) — hem buton hem kaydırıcı bir arada.
  - 2026-07-16 (c): eserler.html'den tek eserle (?work=) sahneye girildiğinde
    alt navbar görünme bug'ı düzeltildi. Sebep: tek-eser giriş yolu, startStage()
    içindeki stageEnter olayını (topnav.js'in paylaşılan #r-bottom-nav'ı gizlemesini
    tetikleyen) atlamıyordu. Çözüm: (1) ?work= yoluna aynı giriş dizisi eklendi
    (_stageActive + stageEnter + applyStageTheme); (2) sağlamlık için showScreen()
    body'ye 'stage-active' sınıfı ekliyor ve CSS bu sınıfla .r-topnav + #r-bottom-nav'ı
    display:none !important yapıyor — giriş yolundan/topnav zamanlamasından bağımsız.
  - 2026-07-17: loadWL() works fetch'i ANON key (SUPA_KEY) ile yapılıyor — eskiden
    süresi dolmuş sb_token 401 verince WL boş kalıyor, sahne modunda ad/güfte yerine
    numara çıkıyor VE eserler.html'den ?work= ile girişte WL boş olunca picker'a
    düşülüyordu. r.ok + dizi kontrolü eklendi; timeout 4000→3500. Ayrıca ?work= yolu
    artık WL bir an boş olsa bile picker'a düşmeyip tek-eser sahnesine giriyor
    (ad/güfte works gelince tazeleniyor). Tek kök, üç sorunu kapatır.
  - 2026-07-17 (b): Çevrimdışı bildirimi eklendi — bağlantı GERÇEKTEN yoksa
    (navigator.onLine===false) ve veri yerelden gösteriliyorsa "📵 Çevrimdışı mod —
    yerel veriler gösteriliyor" toast'ı sayfa başına bir kez çıkar (works ve reps
    arka plan fetch'i başarısız olunca; stageToast/stageOfflineToast). repertuvarlar
    ve eserler ile aynı davranış.
  - 2026-07-17 (c): Akor rengi temaya duyarlı yapıldı. .cp-chord artık sabit mavi
    değil, var(--chord-color): karanlıkta #FFC83D (altın), açıkta #B26A00 (koyu amber).
    Güfteden (--text) net ayrışıp sahnede takibi kolaylaştırır. eserler.html'de de aynı.
  - 2026-07-17 (d): Sahne alt tabanı yeniden düzenlendi (güfteye daha çok yer).
    Menü (ayarlar) butonu küçültülüp mutlak konumla sağ alta, harf kontrolünün ÜSTÜNE
    alındı (.sb-menu/.sb-menu-btn — satır yüksekliği eklemez). Harf büyüt/küçült
    kontrolü küçültülüp "Sıradaki" kartıyla aynı alt satıra yan yana kondu. .sm ve
    .wlyrics alt padding'leri (80-100px → 20px) kısıldı; güfte alanı büyüdü.
  - 2026-07-17 (e): Alt kontrol çubuğu (.sb) artık in-flow değil, tabana YÜZEN
    overlay (position:absolute;bottom:0;pointer-events yalnız pill'lerde). Güfte alanı
    (.sm) ekranın en altına kadar uzuyor; alt boşluk yalnızca her zaman görünen harf
    kontrolünü aşacak kadar (calc(60px+safe-area)). Menü butonu/paneli güftenin üstüne
    biniyor (bazen açık). Böylece güftenin alt çizgisi menü üst hizasında kesilmiyor.
  - 2026-07-17 (f): Sahne alt menüsüne (v2StageBotNav → stageNavStage) "Ana Sayfa"
    linki eklendi (btnStageHome → index.html), Geri Dön ile Çık arasında. Menü artık:
    Geri Dön · Ana Sayfa · Çık.
  - 2026-07-18 (g): Desktop'ta (min-width:1024px) sağ alttaki "Navigasyon" (☰)
    butonu tepkisiz görünüyordu — openStageNav() çalışıyordu ama medya sorgusundaki
    #v2StageBotNav{display:none !important} menüyü tamamen gizliyordu. Eklenen kural:
    body.stage-active #v2StageBotNav:not(.stage-hidden) → display:flex !important +
    position:fixed alt şerit. Yani varsayılan gizli, butonla açılınca görünür.
  - 2026-07-18 (h): AKOR MODUNDA ± TON eklendi. Ton kaydırma ESER BAŞINA saklanır
    (personal_chords.transpose, kullanıcıya özel, cihazlar arası senkron). Motor:
    transposeChordPro/transposeChordToken/transposeNote — bemol tercihli (_CHROM_FLAT),
    slash bass (G/B) ve uzantılar (m7, sus4...) korunur. GÖRÜNÜM dönüşümüdür: kayıtlı
    akor metni asla değişmez, renderStage çizerken uygular. UI: Görünüm Ayarları (⚙)
    satırında Akor modunda − / rozet / + ; rozete basınca ton sıfırlanır. Aralık -6..+6.
  - 2026-07-18 (i): Ton kontrolünün yanına KARAR SESİ göstergesi eklendi — kaydırılmış
    güncel karar "A (La)" biçiminde yazılır (kaydırıldıysa altın renk, ipucunda orijinali).
    Solfej (La, Sib, Sol#) ve Latin (A, Bb) yazımı tanınır; perde adı gibi tanınmayan
    değerler KAYDIRILMADAN olduğu gibi gösterilir (koma sesleri 12 eşit aralığa oturmaz).
    Kaynak: repertuvar item.closingNote, yoksa WL[...].closingNote.
  - 2026-07-18 (j): Sahnede eser BAŞLIĞININ ALTINA karar sesi rozeti (.wkarar) eklendi —
    "Karar: A (La)" biçiminde, ton değiştikçe güncellenir (renderStage her ± basışında
    yeniden çizdiği için otomatik). Kaydırıldıysa altın (.shifted) + ipucunda orijinali.
    Tanınmayan yazımlar (perde adları) kaydırılmadan gösterilir, yanına "(kaydırılmadı)".
  - 2026-07-18 (k): Sahne alt menüsü (v2StageBotNav) iki düzeltme: (1) otomatik kapanma
    4sn → telefonda 8sn, masaüstü/tablette (min-width:768px) HİÇ kapanmıyor
    (scheduleStageNavHide); fare/parmak menü üzerindeyken sayaç duruyor, ayrılınca
    yeniden başlıyor. (2) Masaüstünde menü tüm sayfa genişliğine yayılıyordu — artık
    butonlar kadar geniş, ortalanmış bir kapsül (width:fit-content + margin:auto,
    .v2-bn-item flex:0 0 auto).
  - 2026-07-18 (l): Görünüm Ayarları şeridi (#stageToolsPanel) masaüstünde ekran boyu
    uzuyordu — inline stilde left:12px + right:12px vardı. @media(min-width:768px) ile
    left:auto + width:fit-content (!important, inline stili geçmek için) yapıldı:
    geniş ekranda butonlar kadar geniş, sağa yaslı; telefonda tam genişlik korunuyor.
  - 2026-07-18 (m): Görünüm Ayarları şeridi otomatik kapanma: 4sn → telefonda 8sn,
    masaüstü/tablette (min-width:768px) HİÇ kapanmıyor — kullanıcı ☰'ye veya dışarı
    basana kadar açık kalır. Fare/parmak şeridin üzerindeyken sayaç duruyor, ayrılınca
    yeniden başlıyor (scheduleStageToolsHide + panel hover/touch dinleyicileri).
  - 2026-07-18 (n): TABLET dikey + yatay düzeltmesi. (1) Kapsül menü ve "açık kalsın"
    davranışı yalnızca ≥1024px'te tanımlıydı; tablet DİKEY (768–1023) kapsam dışı
    kalıyordu — eşik @media(min-width:768px)'e indirildi, iki yönde de aynı davranış
    (JS zaten min-width:768px kullanıyor). transform:none eklendi ki stage-hidden'ın
    translateY'si açık kapsülde kalıntı bırakmasın. (2) Yatay/alçak ekranlar için
    @media(max-height:620px): #stageToolsPanel max-height + overflow-y:auto (menü
    ekran dışına taşıp "kaybolmuyor"), kapsül bottom 22→10px, başlık/karar/.sm
    boşlukları küçültüldü.
  - 2026-07-18 (o): Dört düzeltme. (1) BAŞLIK GÜFTEDEN AYRILDI — eser adı + karar
    rozeti artık kaydırılan .sm alanının dışında, sabit #smHead şeridinde; güfte
    büyüyüp kaydıkça başlık yerinden oynamıyor. Üst boşluklar küçültüldü (.sm
    padding-top 28→6px, .smhead 6/8px) — başlık ekranın üstüne yakın, alan verimli.
    (2) Karar rozeti BÜYÜTÜLDÜ: clamp(11–14px) → clamp(15–22px), font-weight 800
    (sahnede uzaktan okunabilsin). (3) ± TON artık eserde AKOR VARSA görünüyor
    (eskiden yalnızca Akor görünümündeyken gelirdi; Söz'e geçince "motor kayboldu"
    sanılıyordu) — Nota görünümünde gizli. (4) Alt menü (v2StageBotNav) HER ekran
    boyutunda 10sn sonra kapanıyor; masaüstü/tablette hiç kapanmaması kaldırıldı.
  - 2026-07-19 (r): POTPURİ (medley) desteği. repertoire_items.linked_prev=true olan
    ARDIŞIK eserler kesintisiz bir zincir sayılır. Sahnede: (1) üst barda zincir rozeti
    #medleyBadge — "🔗 Potpuri 2/3" (kaçıncı parçadasın); (2) "Sıradaki" kartı zincir
    içindeyken altın çerçeveli "🔗 POTPURİ — DEVAMI" başlığına döner (kart KALDIRILMADI
    — potpuride sıradakini bilmek daha da önemli); (3) zincirin son parçasında kart
    normale döner. Yardımcılar: stageChainInfo(items,idx) → {inChain,pos,len,nextLinked}.
    linked_prev alanı items map'inde zaten ...t ile geliyor; ilk satırda yok sayılır.
  - 2026-07-19 (p): GÖRÜNÜM SEÇİCİ (Söz/Akor/Nota) AÇILIR MENÜDEN SEKME (tab)
    STİLİNE çevrildi. Üst bardaki #viewModeBtn ikonu + #viewModeMenu açılır menüsü
    KALDIRILDI; yerine üst barda her zaman görünen segmented sekme şeridi geldi:
    #viewModeTabs (.vm-tabs / .vm-tab, data-mode="lyrics|chords|nota"). Aktif sekme
    accent dolgulu; eserde o veri yoksa sekme pasif (disabled, .32 opaklık) ama
    ŞERİT HER ZAMAN GÖRÜNÜR (yalnız güftesi olan eserlerde de) — eski "menü kayıp"
    kuralı korunuyor. Dar ekranda (<430px) sekme etiketleri gizlenir, yalnız ikon
    kalır (dokunma alanı ≥40px korunur). Fonksiyonlar: setViewMode() aynı,
    updateViewToggleUI() artık sekmeleri işaretliyor; toggleViewModeMenu()/
    closeViewModeMenu() geriye dönük uyumluluk için boş stub olarak duruyor.
-->
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
  <link rel="icon" type="image/png" href="Repertuvar_logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title data-i18n="sh.sayfaBaslik">Sahne Modu</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{--bg:#080810;--surface:#0f0f1a;--surface2:#161625;--border:#484860;--accent:#a855f7;--accent2:#c084fc;--text:#f1f0ff;--text2:#8b8aa8;--text3:#3d3d58;--green:#4a9462;--red:#c05444;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;background:var(--bg);}
body{background:var(--bg);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Plus Jakarta Sans', sans-serif;position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;user-select:none;}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;}
/* Picker ve bitiş ekranlarında üst nav görünür kalıyor — bu ekranlar onun gerçek
   yüksekliğinin (66px içerik + safe-area) altından başlamalı. Sahne performans ekranında
   üst nav gizlendiği için (showScreen()) o ekran tam viewport'ta (top:0) kalmaya devam ediyor. */
#pickerScreen, #endScreen{top:calc(66px + env(safe-area-inset-top));}
.screen.hidden{display:none;}

#pickerScreen{background:var(--bg);overflow:hidden;}
.pi{width:100%;max-width:520px;height:100%;margin:0 auto;display:flex;flex-direction:column;}
.pi-fixed-top{flex-shrink:0;padding:4px 24px 0;}
.pi-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 24px;}
.pi-fixed-bottom{flex-shrink:0;padding:16px 24px calc(32px + env(safe-area-inset-bottom));}
.plogo{display:flex;align-items:center;gap:10px;margin-bottom:28px;justify-content:center;}
.plogo small{color:var(--text2);font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
.ptitle{font-weight:800;letter-spacing:-.02em;font-size:26px;color:var(--text);margin-bottom:8px;text-align:center;}
.psub{font-size:13px;color:var(--text2);margin-bottom:16px;text-align:center;}
.rsl{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;}
.rsl::-webkit-scrollbar{width:4px;}.rsl::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.rsi{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;cursor:pointer;transition:border-color .15s,background .15s;display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;-webkit-touch-callout:none;user-select:none;}
.rsi:hover{border-color:rgba(255,200,61,.4);background:var(--surface2);}
.rsi.sel{border-color:#FFC83D;background:linear-gradient(rgba(255,200,61,.10),rgba(255,200,61,.10)),var(--surface);}
.rsn{font-size:15px;font-weight:500;color:var(--text);margin-bottom:3px;}
.rsm{font-size:12px;color:var(--text2);}
.rsc{font-size:12px;color:var(--text3);}
/* ── İKİ YÖNLÜ KAYDIRMA (repertuvarlardaki desenin aynısı): sağa → Değiştir, sola → Sil/Gizle ── */
.rs-wrap{position:relative;overflow:hidden;border-radius:10px;}
.rs-wrap .rsi{position:relative;z-index:2;touch-action:pan-y;}
.rs-edit-bg,.rs-delete-bg{position:absolute;top:0;bottom:0;width:84px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:600;z-index:1;cursor:pointer;}
.rs-edit-bg{left:0;background:#4DA3FF;}
.rs-delete-bg{right:0;background:#FF5A5F;}
.rs-delete-bg.rs-hide-bg{background:#4A90D9;}
.rs-edit-bg i,.rs-delete-bg i{font-size:18px;}
/* Swipe sırasında mavi→kırmızı gradient çerçeve — parmak ne kadar kayarsa o kadar belirginleşir */
.rs-wrap::before {
  content:''; position:absolute; inset:0; border-radius:10px; padding:2.5px;
  background:linear-gradient(90deg,#4DA3FF,#FF5A5F);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:var(--swipe-glow,0); pointer-events:none; z-index:3;
}
/* Picker ekranı: marka paleti (altın/mavi) — sahne performans ekranı kendi mor gece paletinde kalıyor */
#pickerScreen{--accent:#FFC83D;--accent2:#4DA3FF;}
.bstart{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:10px;padding:9px;color:#0a0818;font-size:16px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;transition:opacity .15s,transform .1s;box-shadow:0 4px 14px rgba(255,200,61,.22);}
.bstart:hover{opacity:.92;}
.bstart:active{transform:scale(.98);}
.bstart:disabled{opacity:.35;cursor:not-allowed;}
.bback{display:block;text-align:center;margin-top:14px;font-size:12px;color:var(--text3);text-decoration:none;}
.bback:hover{color:var(--text2);}
.loading{text-align:center;color:var(--text2);padding:24px;font-size:13px;}

.stb{display:flex;flex-direction:column;align-items:stretch;padding:8px 16px 7px;padding-top:calc(8px + env(safe-area-inset-top));border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface);gap:7px;position:relative;z-index:401;}
.stb-r1{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0 16px 6px;}
.stb-r2{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;}
#v2StageBotNav .v2-bn-exit { color: #c05444 !important; }
#v2StageBotNav .v2-bn-exit:hover { color: #e06655 !important; }
.strn{font-size:12px;color:var(--text2);font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto;}
.stp{display:flex;align-items:center;gap:10px;}
.pds{display:flex;gap:5px;align-items:center;}
.pd{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .2s,transform .2s;flex-shrink:0;}
.pd.done{background:var(--text3);}
.pd.cur{background:var(--accent);transform:scale(1.4);}
.pbar{width:96px;height:4px;border-radius:999px;background:var(--border);overflow:hidden;}
.pbar span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .25s;}
.stc{display:inline;font-size:11px;font-weight:600;color:var(--text2);margin-left:6px;}
.bex{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 10px;color:var(--text3);font-size:11px;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .15s;}
.bex:hover{color:var(--red);border-color:var(--red);}

/* ═══ Görünüm seçici: Söz / Akor / Nota — SEKME (tab) stili, üst barda ═══ */
/* 2026-07-19: açılır menü (.vm-menu/.vm-item) yerine her zaman görünen sekme şeridi. */
/* ── POTPURİ rozeti (2026-07-19) ── */
.medley-badge{display:none;align-items:center;gap:5px;background:rgba(255,200,61,.14);border:1px solid var(--accent);color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.03em;padding:3px 8px;border-radius:999px;white-space:nowrap;flex-shrink:0;}
.np.medley{border-color:var(--accent);background:rgba(255,200,61,.10);}
.np.medley .nl{color:var(--accent);font-weight:800;}
.vm-tabs{display:flex;align-items:center;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:3px;flex-shrink:0;}
.vm-tab{display:flex;align-items:center;justify-content:center;gap:6px;background:none;border:none;color:var(--text2);font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;padding:0 11px;height:34px;min-width:40px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .14s,color .14s;}
.vm-tab .ti{font-size:17px;line-height:1;}
.vm-tab:hover:not(:disabled):not(.active){color:var(--text);background:rgba(255,255,255,.05);}
.vm-tab.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.28);}
.vm-tab.active .ti{color:#fff;}
.vm-tab:disabled{opacity:.32;cursor:not-allowed;}
/* Dar ekran: etiket gizlenir, ikon kalır — dokunma alanı korunur */
@media (max-width:430px){
  .vm-tab .vm-lbl{display:none;}
  .vm-tab{padding:0 9px;min-width:42px;}
  .stage-info-btn .vm-lbl{display:none;}
  .stage-info-btn{padding:0 9px;}
}

/* Sabit başlık şeridi — güfte alanının DIŞINDA, üstte durur. Güfte büyüyüp
   kaydıkça başlık yerinden oynamaz; alan da verimli kullanılır (üste yakın). */
.smhead{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4px 16px 4px;text-align:center;position:relative;z-index:5;}   /* (2026-08-06) alt boşluk 8→4 */
.smhead .wtitle{margin-bottom:2px;}
.smhead .wnum{margin-bottom:2px;}
/* (2026-08-06) DİKEY ORTALAMA KALDIRILDI. Söz bloğu ekranın ortasına
   yaslandığı için yazı büyütüldükçe metin YUKARI doğru taşıyordu ve okunan
   satırın yeri kayıyordu. Artık içerik SOL ÜSTTEN başlıyor, büyüdükçe sağa
   ve aşağı doğru genişliyor — göz aynı noktada kalıyor. Yatay hiza kullanıcı
   tercihinde (Görünüm Ayarları → sola/ortala/sağa), varsayılan artık SOL. */
.sm{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2px 16px calc(58px + env(safe-area-inset-bottom));position:relative;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;}.sm::-webkit-scrollbar{display:none;}
/* (2026-08-13) SÖZ ALANI KAYDIRILAMIYORDU (fare tekerleği çalışmıyor, uzun
   eserin başına/sonuna gidilemiyor). SEBEP: .sm bir flex öğesi ve flex
   öğelerinin varsayılan min-height değeri AUTO — yani öğe içeriğinden daha
   kısa olamıyor. Bu yüzden .sm içerik kadar UZUYORDU, overflow-y:auto hiç
   devreye girmiyordu ve taşan kısım body'nin overflow:hidden'ı tarafından
   kırpılıyordu. min-height:0 öğenin küçülmesine izin verir, kaydırma
   böylece gerçekten çalışır. (Aynı düzeltme .pi-scroll'da zaten vardı.)
   FARE İLE KULLANILAN CİHAZLARDA İNCE ÇUBUK GÖSTERİLİYOR: dokunmatikte
   çubuk gereksiz ve sahnede dikkat dağıtıcı, ama masaüstünde kaydırma
   imkânının GÖRÜNÜR olması gerekiyor — yoksa kullanıcı kaydırılabileceğini
   bilmiyor (Emir bildirdi). */
@media (pointer:fine){
  .sm{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;}
  .sm::-webkit-scrollbar{display:block;width:8px;}
  .sm::-webkit-scrollbar-track{background:transparent;}
  .sm::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:8px;}
  .sm::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34);}
  body.day-theme .sm{scrollbar-color:rgba(0,0,0,.24) transparent;}
  body.day-theme .sm::-webkit-scrollbar-thumb{background:rgba(0,0,0,.24);}
  body.day-theme .sm::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.36);}
}
.sm::before{content:'';position:fixed;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,0.07) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;} .sm>*{position:relative;z-index:1;}
.wnum{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;opacity:0;animation:si .4s ease forwards;}
/* (2026-08-13) iOS SAFARI ÇİFT DOKUNUŞ YAKINLAŞTIRMASI KAPATILDI.
   Belirti (Emir, iPhone Safari): ton düğmesine arka arkaya iki kez basınca sayfa
   "zoom in" yapıyor, yazılar büyüyor. SEBEP: iOS 10'dan beri Safari
   `user-scalable=no` meta ayarını YOK SAYIYOR (erişilebilirlik gerekçesiyle);
   bir düğmeye 300 ms içinde iki kez dokunmak çift dokunuş sayılıp yakınlaştırma
   tetikliyor. ÇÖZÜM: etkileşimli öğelerde `touch-action:manipulation` — çift
   dokunuş yakınlaştırmasını kapatır, kaydırma ve PARMAKLA (pinch) yakınlaştırma
   çalışmaya devam eder. KASITLI OLARAK sahne gövdesine/nota alanına
   uygulanmıyor: notaya çift dokunup yakınlaştırmak işe yarıyor. */
button, .align-btn, .ton-btn, .ton-step, .vm-tab, .fs-step, .side-nav-btn,
.sb-menu-btn, .stage-info-btn, .nota-pager button, .bex, .st-act,
input[type="range"], #stageToolsPanel, .stage-nav a{ touch-action:manipulation; }
/* (2026-08-13) PANEL ARTIK YARI SAYDAM + BULANIK ZEMİN.
   Emir: "açılan menünün zemini eserin sözlerini tamamen kapatıyor."
   Şeffaflık tek başına okunaklılığı bozardı (arkadaki söz satırları düğme
   yazılarıyla karışır); bu yüzden backdrop-filter ile ARKASI BULANIKLAŞTIRILIYOR
   — söz "var" ama okunmuyor, panel yazısı net kalıyor. Bulanıklığı desteklemeyen
   tarayıcıda (eski Firefox vb.) zemin neredeyse opak hâle düşürülüyor.
   SAYDAMLIK ORANI ÖLÇÜLEREK SEÇİLDİ (0.78): en kötü hâlde (panel BEYAZ söz
   metninin üstüne denk gelince) etiket kontrastı 5.6:1, ikonlar 6.8:1 —
   WCAG AA (4.5) üstünde. 0.72'de etiket 4.5'in altına düşüyordu.
   Zemin/çerçeve artık inline stilde DEĞİL — inline stil sınıf kuralını ezdiği
   için tema değişimi ve saydamlık burada yönetiliyor (bkz. 2026-08-12 dersi). */
#stageToolsPanel{
  background:rgba(14,14,26,.78);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 28px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
}
body.day-theme #stageToolsPanel{
  background:rgba(252,251,249,.82);
  border-color:rgba(0,0,0,.14);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  #stageToolsPanel{ background:rgba(14,14,26,.94); }
  body.day-theme #stageToolsPanel{ background:rgba(252,251,249,.96); }
}
/* (2026-08-13) PANEL YAZILARI AÇILDI. --text3 gece temasında #3d3d58 —
   panel zemininde kontrastı ~2:1, sahnede karanlıkta okunmuyordu (Emir bildirdi).
   Yalnızca panel içinde açık ton kullanılıyor; --text3 başka yerlerde (ipucu,
   pasif metin) olduğu gibi kalıyor. */
#stageToolsPanel .st-grp-lbl{ color:#bfbdd6; }
#stageToolsPanel .align-btn:not(.active),
#stageToolsPanel .ton-step,
#stageToolsPanel .ton-btn:not(.shifted),
#stageToolsPanel .font-slider-wrap .fs-a-sm,
#stageToolsPanel .font-slider-wrap .fs-a-lg{ color:#d3d1e6; }
#stageToolsPanel .align-btn:not(.active),
#stageToolsPanel .ton-step,
#stageToolsPanel .ton-btn:not(.shifted),
#stageToolsPanel .font-slider-wrap,
#stageToolsPanel .ton-slider-wrap{ border-color:rgba(255,255,255,.22); }
#stageToolsPanel .font-slider-wrap,
#stageToolsPanel .ton-slider-wrap{ background:rgba(255,255,255,.06); }
#stageToolsPanel .st-grp + .st-grp{ border-top-color:rgba(255,255,255,.14); }
/* (2026-08-13) Sahne bloğu da aynı okunaklılık kuralına tabi: --text3 panel
   zemininde okunmuyor. Çıkış satırı KIRMIZI kalıyor (kasıtlı ayrım) ama
   karanlıkta seçilebilsin diye açık kırmızıya alındı. */
#stageToolsPanel .st-act:not(.st-act-exit){ color:#d3d1e6; border-color:rgba(255,255,255,.22); }
#stageToolsPanel .st-act-exit{ color:#f08878; border-color:rgba(240,136,120,.45); }
body.day-theme #stageToolsPanel .st-act:not(.st-act-exit){ color:#3d3a52; border-color:rgba(0,0,0,.18); }
body.day-theme #stageToolsPanel .st-act-exit{ color:#b8402c; border-color:rgba(184,64,44,.4); }
body.day-theme #stageToolsPanel .st-grp-lbl{ color:#5a5670; }
body.day-theme #stageToolsPanel .align-btn:not(.active),
body.day-theme #stageToolsPanel .ton-step,
body.day-theme #stageToolsPanel .ton-btn:not(.shifted),
body.day-theme #stageToolsPanel .font-slider-wrap .fs-a-sm,
body.day-theme #stageToolsPanel .font-slider-wrap .fs-a-lg{ color:#3d3a52; }
body.day-theme #stageToolsPanel .align-btn:not(.active),
body.day-theme #stageToolsPanel .ton-step,
body.day-theme #stageToolsPanel .ton-btn:not(.shifted),
body.day-theme #stageToolsPanel .font-slider-wrap,
body.day-theme #stageToolsPanel .ton-slider-wrap{ border-color:rgba(0,0,0,.18); }
body.day-theme #stageToolsPanel .font-slider-wrap,
body.day-theme #stageToolsPanel .ton-slider-wrap{ background:rgba(0,0,0,.04); }
body.day-theme #stageToolsPanel .st-grp + .st-grp{ border-top-color:rgba(0,0,0,.12); }
/* Görünüm Ayarları şeridi (#stageToolsPanel) inline stilde left:12px + right:12px
   olduğu için masaüstünde ekran boyu uzuyordu. Geniş ekranda butonlar kadar geniş
   olsun, sağ kenara yaslansın; telefonda tam genişlik kalsın (butonlar sarabilsin).
   Inline stili geçmek için !important şart. */
@media (min-width:768px){
  #stageToolsPanel{ left:auto !important; width:fit-content !important; max-width:calc(100vw - 24px) !important; }
}
.wtitle{font-family:'DM Sans',sans-serif;font-size:clamp(22px,3.4vw,36px);font-weight:700;color:var(--text);text-align:center;line-height:1.2;max-width:100%;margin-bottom:10px;opacity:0;animation:si .4s ease .07s forwards;}
/* Karar sesi rozeti — başlığın altında, ton değiştikçe güncellenir */
.wkarar{font-size:clamp(15px,2.1vw,22px);font-weight:800;letter-spacing:.05em;color:var(--text2,#9aa4b2);text-align:center;margin:0;opacity:0;animation:si .4s ease .12s forwards;}
.wkarar.shifted{color:var(--accent,#FFC83D);}
.wcr{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:12px;opacity:0;animation:si .4s ease .14s forwards;}
.wcr:empty{display:none;margin:0;}
.wch{padding:5px 14px;border-radius:20px;font-size:13px;border:1px solid var(--border);color:var(--text2);background:var(--surface);}
.wch.m{border-color:#3a3060;color:#9b8fd4;background:#1a1828;}
.wch.n{border-color:#3d2a1a;color:var(--accent);background:#1e1208;}
.wch.i{border-color:#1a2d1a;color:#7ab87a;background:#0f1a0f;}
.wnote{font-size:13px;color:var(--text2);text-align:center;font-style:italic;max-width:100%;line-height:1.6;opacity:0;animation:si .4s ease .2s forwards;}
/* (2026-08-21) KİŞİSEL NOT — sahnede SALT OKUNUR. Turkuaz + kilit, altın
   (--accent) marka vurgusundan ve paylaşılan alanlardan ayrılsın diye.
   Karanlıkta simge ve sol kenar çizgisi renkten hızlı okunuyor. */
.knot-sahne{display:flex;align-items:flex-start;gap:8px;margin:10px auto 0;max-width:100%;
  padding:7px 11px;border-radius:9px;text-align:left;cursor:pointer;
  border:1px solid rgba(45,212,191,.28);border-left:3px solid #2dd4bf;background:rgba(45,212,191,.07);
  opacity:0;animation:si .4s ease .25s forwards;}
.knot-sahne i{color:#5eead4;font-size:14px;line-height:1.5;flex:0 0 auto;}
.knot-sahne .kn-tx{font-size:13px;line-height:1.55;color:var(--text2);white-space:pre-wrap;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.knot-sahne.acik .kn-tx{-webkit-line-clamp:unset;display:block;}
.knot-sahne .kn-dh{flex:0 0 auto;color:var(--text3);font-size:11px;margin-left:auto;align-self:center;}
.wlyrics{font-size:calc(clamp(18px,2.8vw,28px) * var(--lyrics-scale,1) * var(--fit-scale,1));color:var(--text);text-align:left;width:100%;max-width:100%;line-height:1.9;opacity:0;animation:si .4s ease .28s forwards;margin-top:2px;padding:0 4px 16px;box-sizing:border-box;overflow-x:hidden;overflow-wrap:break-word;-webkit-overflow-scrolling:touch;}
.wnota{display:flex;justify-content:center;align-items:center;opacity:0;animation:si .4s ease .28s forwards;margin-top:16px;padding:0 8px 40px;width:100%;}
/* ═══ 2026-07-20: ÇOK SAYFALI NOTA — sayfa göstergesi + pager ═══ */
.wnota{flex-direction:column;gap:10px;}
.wnota img{max-width:100%;max-height:70vh;border-radius:8px;}
.nota-count{position:absolute;top:10px;right:12px;z-index:40;font-size:12px;font-weight:800;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);pointer-events:none;}
body.stage-light .nota-count{background:rgba(255,255,255,.75);color:#1a1a1a;border-color:rgba(0,0,0,.15);}
.nota-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:4px 0 8px;}
.nota-pager button{background:none;border:1px solid var(--border);color:var(--text2);border-radius:999px;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;}
.nota-pager button:disabled{opacity:.25;pointer-events:none;}
.nota-dots{display:flex;gap:8px;align-items:center;}
.nota-dot{width:9px;height:9px;border-radius:50%;background:var(--border);border:none;padding:0;cursor:pointer;transition:all .18s;}
.nota-dot.cur{background:var(--accent);transform:scale(1.35);}
.nota-pdf{background:var(--surface2, #16161c);border:1px solid var(--border);border-radius:8px;padding:18px;text-align:center;color:var(--text2);font-size:14px;}
.wlyrics::-webkit-scrollbar{width:3px;}.wlyrics::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
/* ChordPro: akor hecenin üstünde */
/* (2026-08-10) GERİ ALINDI — bu deneme sahnede ciddi bozulma yaptı:
   `text-indent:-1.4em` ilk satırı kabın soluna taşıyıp KIRPIYOR, `nowrap`
   ise segmentleri üst üste bindiriyordu (Emir ekran görüntüsü).
   Uzun satır sorunu başka yoldan çözülecek (yazı boyutu uyarlama ya da
   kaynakta satır bölme). Aşağıdaki kurallar ESKİ, ÇALIŞAN hâline döndürüldü.
   Eski deneme notu:
   Sorun: bir `.cp-seg` (akor + onu takip eden heceler) kendi İÇİNDE de
   kırılabiliyordu; kırılma parçanın ortasına gelince akor üstte kalıyor,
   sözün devamı alta iniyor ve akor kaymış görünüyordu.
   Çözüm: segmentler `white-space:nowrap` — satır artık yalnızca AKORLAR
   ARASINDAN kırılıyor, akor hecesinden hiç ayrılmıyor.
   Ayrıca alta inen devam satırı içeri girintili (asılı girinti) ki yeni bir
   dize mi yoksa devam mı olduğu bir bakışta anlaşılsın. */
.wlyrics .cp-line{display:block;text-align:left;}
.wlyrics .cp-blank{display:block;height:.9em;}
.wlyrics .cp-comment{display:block;text-align:left;color:var(--marker-color,#8FA6FF);font-style:italic;font-size:.7em;margin:10px 0 2px;opacity:.9;}
.wlyrics .cp-seg{display:inline-block;position:relative;vertical-align:bottom;}
/* 2026-07-29: akor genişliğe katkı vermesin (width:0) — yoksa .cp-seg genişliği
   max(akor, hece) olduğu için akor heceden genişken kelime ortadan yarılıyordu
   ("varıl maz") ve akorlar yapışıyordu. Heceye bağlı olmayan akorlar (.cp-tail)
   genişliği korur ki yan yana geldiklerinde araları açık kalsın. */
.wlyrics .cp-chord{display:block;width:0;overflow:visible;font-size:.62em;font-weight:700;color:var(--chord-color,#FFC83D);line-height:1.15;min-height:1.2em;white-space:nowrap;font-family:'SF Mono',ui-monospace,monospace;letter-spacing:.02em;}
.wlyrics .cp-seg.cp-tail .cp-chord{width:auto;padding-right:.7em;}
/* (2026-08-09) Satır sonu tekrar rozeti — "2X". Akor değil, satıra ait not. */
/* (2026-08-13) RENK AYRILDI: işaretler (2X, Nakarat, Bağlantı) akorlarla aynı
   renkteydi ve sahnede karışıyordu (Emir bildirdi). Artık kendi değişkenleri var:
   --marker-color, mavi-mora yakın. Böylece üç katman üç renk oluyor —
   SÖZ beyaz (--text), AKOR altın (--chord-color), İŞARET mavi-mor. Rozet
   çerçevesi/zemini de aynı değişkenden türüyor. */
.cp-rep{display:inline-block;margin-left:10px;padding:0 7px;border-radius:10px;font-size:.62em;font-weight:800;
  letter-spacing:.04em;vertical-align:middle;color:var(--marker-color,#8FA6FF);border:1px solid var(--marker-color,#8FA6FF);
  background:color-mix(in srgb, var(--marker-color,#8FA6FF) 14%, transparent);white-space:nowrap;}
/* Akor rengi — temaya duyarlı altın/amber, güfteden ayrışsın (2026-07-17) */
:root{--chord-color:#FFC83D;}            /* karanlık: parlak altın */
body.day-theme{--chord-color:#B26A00;}   /* açık: koyu amber (beyaz zeminde kontrast) */
/* İşaret rengi (2X, Nakarat, Bağlantı…) — akordan da sözden de ayrı. Marka
   mavisine (#3522C9) yakın ama sahne karanlığında okunacak kadar açık. */
:root{--marker-color:#8FA6FF;}           /* karanlık: soğuk lavanta-mavi */
body.day-theme{--marker-color:#3F3BC0;}  /* açık: koyu indigo */
[data-theme="light"]{--marker-color:#3F3BC0;}
[data-theme="light"]{--chord-color:#B26A00;}
.wlyrics .cp-lyric{display:block;white-space:pre-wrap;}

/* (2026-08-06) Kart 10px aşağı indi: dip boşluğu 16→6px. */
.sb{padding:0 16px 6px;position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:10px;z-index:10;pointer-events:none;}
.sb > *{pointer-events:auto;}
/* (2026-08-06) ⚙ düğmesi artık alt şeridin ÜSTÜNDE değil, İÇİNDE: normal bir
   flex öğesi olduğu için .sb'nin align-items:flex-end'i sayesinde alt hizası
   "Sıradaki" kartıyla (.np) kendiliğinden aynı seviyede — her ekran boyutunda,
   safe-area dahil. Eskiden bottom:calc(100% + 6px) ile kartın üstünde duruyordu.
   Panel position:fixed olduğu için bu değişiklikten etkilenmiyor. */
.sb-menu{position:relative;order:2;margin-left:auto;z-index:11;align-self:stretch;display:flex;}
/* (2026-08-06) Düğme "Sıradaki" kartıyla ORANTILI: aynı yükseklikte
   (align-self:stretch), aynı köşe yarıçapı (10px) ve aynı sarı çerçeve —
   yan yana durdukları için ikisi tek bir şeritmiş gibi görünüyor. */
.sb-menu-btn{background:var(--surface);border:1px solid #FFC83D;border-radius:10px;width:46px;min-height:100%;display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;transition:color .15s,border-color .15s;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.sb-menu-btn .ti{font-size:20px;}
.sb-menu-btn:hover{color:var(--text);border-color:var(--accent);}
.sb-menu-btn i{font-size:18px;}

#v2StageBotNav{
  position:fixed;bottom:0;left:0;right:0;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  z-index:100;
}
#v2StageBotNav.stage-hidden{transform:translateY(100%);}
/* Sahne ekranındayken paylaşılan topnav.js header'ı ve alt navbar'ı kesin gizle
   (giriş yolundan ve topnav.js yükleme zamanlamasından bağımsız). */
body.stage-active .r-topnav,
body.stage-active #r-topnav-container .r-topnav,
body.stage-active #r-bottom-nav{display:none !important;}

/* (2026-08-06) Kart alçaltıldı, genişlik tavanı kaldırıldı ve YATAY kuruldu:
   solda ad, ortada ayraç, sağda iki satır bilgi. ⚙ düğmesine kadar uzanıyor. */
.np{background:var(--surface);border:1px solid #FFC83D;border-radius:10px;padding:6px 14px;flex:1 1 auto;min-width:0;max-width:none;opacity:0;animation:fi .5s ease .4s forwards;display:flex;flex-direction:column;gap:2px;justify-content:center;}
.np-top{display:flex;align-items:baseline;gap:9px;min-width:0;}
.np-side{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;}
.nl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);font-weight:600;flex:0 0 auto;}
.nn{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;flex:1 1 auto;min-width:0;}
.nmv{font-size:12px;color:var(--text2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.nmx{width:1px;height:13px;background:var(--border);flex-shrink:0;display:block;}
.th{font-size:11px;color:var(--text3);text-align:right;flex-shrink:0;line-height:1.5;opacity:0;animation:fi .5s ease .5s forwards;}
.th kbd{display:inline-block;border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:10px;font-family:'DM Sans',sans-serif;color:var(--text3);}

#endScreen{background:var(--bg);align-items:center;justify-content:center;text-align:center;padding:40px 24px;}
.ei{font-size:56px;margin-bottom:24px;animation:pls 2s ease infinite;}
.et{font-family:'Playfair Display',serif;font-size:36px;color:var(--accent);margin-bottom:12px;}
.es{font-size:15px;color:var(--text2);margin-bottom:8px;}
.ec{font-size:13px;color:var(--text3);margin-bottom:36px;}
.ea{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.be{padding:12px 24px;border-radius:8px;font-size:14px;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .15s;text-decoration:none;display:inline-block;}
.bep{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#0a0818;font-weight:500;}
.bep:hover{opacity:.92;}
.beg{background:none;border:1px solid var(--border);color:var(--text2);}
.beg:hover{border-color:#38383f;color:var(--text);}
.sf{position:fixed;inset:0;background:rgba(168,85,247,0.06);pointer-events:none;animation:ff .25s ease forwards;z-index:99;}

@keyframes si{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fi{from{opacity:0}to{opacity:1}}
@keyframes pls{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes ff{to{opacity:0}}

/* (2026-08-06) Görünüm Ayarları paneli BLOKLARA bölündü. Eskiden tüm düğmeler
   tek bir düz sıradaydı (hiza + ton + akor yazımı + tema + liste yan yana) ve
   sahnede hangi düğmenin ne yaptığı okunmuyordu. Artık her işlev kendi
   başlıklı bloğunda; blok yoksa (ör. eserde akor yoksa) hiç çizilmiyor. */
/* Panel ekranın tamamını kaplamasın: genişlik İÇERİĞE göre (width:max-content),
   sağ kenara yaslı, dar ekranda ekranı taşmıyor (2026-08-06). */
.st-grp{display:flex;flex-direction:column;gap:5px;padding:7px 0;align-items:flex-end;}
.st-grp + .st-grp{border-top:1px solid var(--border);}
.st-grp-lbl{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);text-align:right;}
/* Düğmeler SAĞA toplanıyor: panel sağ alttaki ⚙'nin üstünde açılıyor, başparmak
   oraya yakın duruyor (2026-08-06). */
/* Satır ekrana sığmazsa sarsın; hiçbir düğme kenardan taşıp kesilmesin
   (2026-08-06: Ton bloğunda "−" düğmesi ekran dışında kalıyordu). */
.st-grp-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:100%;}
.st-grp-row .ton-karar{flex-shrink:1;min-width:0;}
/* (2026-08-13) SAHNE BLOĞU — dikey, YAZILI eylem satırları.
   Eskiden sahneden çıkış yolu "Görünüm" bloğundaki ☰ düğmesiydi: ona dokununca
   ALTTAN ikinci bir şerit (#v2StageBotNav) açılıyor, asıl Geri Dön / Ana Sayfa /
   Çık orada duruyordu. İki adımlıydı ve ikon ne yaptığını anlatmıyordu — bunu
   bilmeyen sahneden nasıl çıkacağını bulamıyordu (Emir bildirdi). Artık üç eylem
   doğrudan panelde, YAZIYLA ve tek dokunuşla. Genişlik 144px: diğer bloklarla
   (yazı boyutu, hizalama) aynı hizada bitsin. */
.st-grp-col{flex-direction:column;align-items:stretch;gap:5px;width:144px;flex-wrap:nowrap;}
.st-act{display:flex;align-items:center;gap:9px;width:100%;height:38px;padding:0 11px;box-sizing:border-box;background:none;border:1px solid var(--border);border-radius:6px;color:var(--text3);font-family:inherit;font-size:13px;font-weight:700;line-height:1;text-align:left;text-decoration:none;cursor:pointer;transition:all .15s;}
.st-act .ti{font-size:17px;flex-shrink:0;opacity:.85;}
.st-act:hover{border-color:var(--accent);color:var(--accent);}
.st-act:active{transform:scale(.97);}
.st-act-exit{color:#c05444;border-color:rgba(192,84,68,.45);}
.st-act-exit:hover{color:#e06655;border-color:#e06655;}
.align-btn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text3);width:44px;height:44px;font-size:20px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.align-btn:disabled{opacity:.35;cursor:not-allowed;}
.align-btn:hover{border-color:var(--accent);color:var(--accent);}
.align-btn.active{background:rgba(168,85,247,.15);border-color:var(--accent);color:var(--accent);}
/* (2026-08-06) Genişlik TON bloğuyla aynı: 3 düğme × 44px + 2 boşluk × 6px = 144px.
   Böylece paneldeki bloklar aynı hizada bitiyor. Kaydırıcı kalan yeri kaplıyor. */
.font-slider-wrap{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:9px 10px;flex-shrink:0;width:144px;box-sizing:border-box;}
.font-slider-wrap .fs-a-sm{font-size:13px;font-weight:800;color:var(--text3);line-height:1;}
.font-slider-wrap .fs-a-lg{font-size:19px;font-weight:800;color:var(--text3);line-height:1;}
.fs-step{background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:8px;font-family:inherit;transition:color .15s,background .15s;flex-shrink:0;}
.fs-step:hover{color:var(--text);background:var(--surface2);}
.fs-step:active{transform:scale(.94);}
/* (2026-08-06) Kaydırıcı BÜYÜTÜLDÜ — panele taşındıktan sonra parmakla tutup
   sürüklemesi zordu (Emir bildirdi). Ray kalınlaştı, tutamak 22→30px,
   dokunma alanı için dikey padding verildi. */
/* (2026-08-06) Dikey padding KALDIRILDI: arka plan padding alanını da boyadığı
   için kaydırıcı ince bir çizgi değil kalın bir anahtar gibi görünüyordu.
   Dokunma payı artık sarmalayıcının iç boşluğundan geliyor. */
.font-slider,.ton-slider{-webkit-appearance:none;appearance:none;flex:1;min-width:0;width:auto;height:6px;border-radius:999px;background:var(--border);outline:none;cursor:pointer;padding:0;}
.font-slider::-webkit-slider-thumb,.ton-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer;border:none;}
.font-slider::-moz-range-thumb,.ton-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer;border:none;}
.font-slider::-moz-range-track,.ton-slider::-moz-range-track{height:6px;border-radius:999px;background:transparent;}
/* (2026-08-13) TON KAYDIRICISI — yazı boyutu kaydırıcısıyla aynı görsel dil.
   Kapalıyken tek düğme (o anki karar sesi yazılı), dokununca bu satır açılıyor,
   seçim yapılınca kendiliğinden kapanıyor. Genişlik font bloğundan fazla (214px)
   çünkü 13 adımlı bir kaydırıcı 144px'e sığdırılırsa adım başına 9px kalıyor ve
   sahnede parmakla bir adım şaşırmak kolay — bu yüzden iki yanına tek adım
   düğmesi kondu; blok geçici olduğu için panelin dar hâlini kalıcı bozmuyor. */
.ton-btn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text3);height:44px;min-width:64px;padding:0 12px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;}
.ton-btn:hover{border-color:var(--accent);color:var(--accent);}
.ton-btn.shifted{color:var(--accent);border-color:var(--accent);}
.ton-btn .ti{font-size:16px;opacity:.7;}
.ton-slider-wrap{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:7px 8px;flex-shrink:0;width:214px;max-width:100%;box-sizing:border-box;}
.ton-step{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text3);width:30px;height:30px;flex-shrink:0;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.ton-step:hover{border-color:var(--accent);color:var(--accent);}
.ton-step:active{transform:scale(.94);}
.ton-nota{min-width:50px;flex-shrink:0;text-align:center;font-size:14px;font-weight:800;color:var(--accent);white-space:nowrap;}
.ton-nota small{display:block;font-size:9px;font-weight:700;color:var(--text3);letter-spacing:.04em;}
/* Telefonda DARALTMIYORUZ: kontrol artık alt şeritte değil panelde, yer var. */
@media (max-width:768px){ .font-slider-wrap .fs-a-sm{font-size:12px;} .font-slider-wrap .fs-a-lg{font-size:18px;} }
.stage-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;} .stage-nav a{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 8px;color:var(--text3);font-size:11px;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.stage-nav a:hover{border-color:var(--accent);color:var(--accent);}

/* (2026-08-06) YAN OKLAR ARTIK YALNIZCA MASAÜSTÜNDE.
   Telefon/tablette swipe zaten çalışıyor ve oklar söz metninin üstüne biniyordu.
   Masaüstünde ise dokunmatik yok, swipe yok — klavye dışında tek gezinme yolu
   bunlar, o yüzden orada kalıyorlar (geçmiş: oklar "söze dokununca kazara eser
   atlama" sorununun çözümü olarak büyütülmüştü). */
@media (max-width:1023px), (hover:none) and (pointer:coarse) {
  .side-nav-btn { display:none !important; }
}
.side-nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 12px;
  color: var(--accent);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 0;
  width: 54px;
  height: 132px;
  transition: background .2s, border-color .2s, transform .2s;
  z-index: 60;
  user-select: none;
  font-family: 'DM Sans', sans-serif;
}
.snb-arrow { font-size: 28px; line-height: 1; }
.snb-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: .8; }
.side-nav-btn:hover { background: rgba(168,85,247,0.25); border-color: rgba(168,85,247,0.6); transform: translateY(-50%) scale(1.06); }
.side-nav-btn:active { transform: translateY(-50%) scale(0.96); }
.side-nav-btn.disabled { opacity: 0.15; pointer-events: none; }
.side-nav-left  { left: 8px; border-radius: 12px; }
.side-nav-right { right: 8px; border-radius: 12px; }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    .stb { padding:8px 10px; padding-top:calc(8px + env(safe-area-inset-top)); height:auto; min-height:48px; }
    /* (2026-08-06) 88px tavanı KALDIRILDI: repertuvar adı artık kendi satırında
       (.stb-r2), tek satırda sıkışmıyor — telefonda da tam genişlik kullanabilir. */
    .strn { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .bex, .stage-nav a { font-size:10px; padding:4px 8px; }
    .stage-nav { gap:4px; }
    .sm { padding:20px 14px calc(60px + env(safe-area-inset-bottom)); }
    .sb { padding:0 12px 6px; flex-wrap:nowrap; gap:8px; }
    .side-nav-left { left:8px; border-radius:12px; }
    .side-nav-right { right:8px; border-radius:12px; }
    .side-nav-btn { width:50px; height:120px; }
    /* Picker */
    .pi { max-width:100%; }
    .pi-fixed-top, .pi-scroll, .pi-fixed-bottom { padding-left:16px; padding-right:16px; }
    .rb { padding:14px 16px; }
    .rbn { font-size:14px; }
    .side-nav-btn { width:50px; height:120px; padding:0; }
    .snb-label { font-size:9px; }
    .snb-arrow { font-size:22px; }
    .np { max-width:none; }
  }
  @media (max-width: 480px) {
    .wtitle { font-size:clamp(18px,5vw,26px); }
    .wlyrics { font-size:calc(clamp(14px,4.2vw,20px) * var(--lyrics-scale,1) * var(--fit-scale,1)); line-height:1.8; padding:0 4px 20px; }
    .side-nav-btn { width:46px !important; height:108px !important; }
    .side-nav-left { left:6px !important; border-radius:10px !important; }
    .side-nav-right { right:6px !important; border-radius:10px !important; }
    .snb-label { display:none; }
    .sb { padding:0 8px 6px; gap:8px; flex-wrap:nowrap; }
    .th { font-size:10px; }
    .stb { padding:6px 8px; padding-top:calc(6px + env(safe-area-inset-top)); }
    .stage-nav a, .bex { font-size:10px !important; padding:3px 6px !important; }
    .sm { padding:16px 10px calc(60px + env(safe-area-inset-bottom)); }
    /* Picker screen on mobile */
    .pi-fixed-top, .pi-scroll, .pi-fixed-bottom { padding-left:16px; padding-right:16px; }
    .ptitle { font-size:20px; }
    .rb { padding:12px 14px; }
  }
  /* Picker screen mobile */
  @media (max-width: 600px) {
    .pi-fixed-top, .pi-scroll, .pi-fixed-bottom { padding-left:8px; padding-right:8px; }
    .ptitle { font-size:20px; }
    .psub { font-size:13px; }
    .rl { padding:10px 12px; }
    .rn { font-size:14px; }
  }

  /* ── MOBILE GLOBAL ── */
  @media (max-width: 768px) {
    body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
    button:not(.r-theme-toggle), a:not(.r-theme-toggle) { min-height: 36px; }
    input, select, textarea { font-size: 16px !important; } /* prevent iOS zoom */
  }
  @supports (padding: env(safe-area-inset-bottom)) {
    .sb { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  }


/* Stage Bottom Nav */
#v2StageBotNav { position:fixed; bottom:0; left:0; right:0; height:calc(68px + env(safe-area-inset-bottom)); box-sizing:border-box; background:rgba(7,11,24,0.97); backdrop-filter:blur(24px); border-top:1px solid rgba(255,200,61,0.18); display:none; align-items:center; z-index:400; padding-bottom:env(safe-area-inset-bottom); }
[data-theme="light"] #v2StageBotNav { background: rgba(245,244,251,0.97) !important; border-top-color: rgba(255,200,61,0.2) !important; }
[data-theme="light"] #v2StageBotNav .v2-bn-item { color: #9390b0 !important; }
[data-theme="light"] #v2StageBotNav .v2-bn-item.active { color: #E5A900 !important; }
@media(min-width:1024px){ #v2StageBotNav { position:static; width:100%; height:auto; padding:8px 0; background:rgba(7,7,26,0.6); backdrop-filter:none; } }
#v2StageBotNav .v2-bn-items { display:flex; width:100%; padding:0 4px; }
#v2StageBotNav .v2-bn-item { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:7px 2px; text-decoration:none; color:#5e5c8a; border-radius:10px; transition:color .15s; }
#v2StageBotNav .v2-bn-item.active { color:#FFC83D; }
#v2StageBotNav .v2-bn-label { font-size:9px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; text-align:center; }

/* Desktop: picker ekranında sidebar layout */
/* ── TABLET (dikey + yatay) ──
   Kapsül menü ve "açık kalsın" davranışı önceden yalnızca ≥1024px'te tanımlıydı;
   tablet DİKEY (768–1023) bunun dışında kalıyordu. Eşik 768'e indirildi, böylece
   tablet iki yönde de aynı davranır. JS tarafı da (min-width:768px) kullanıyor. */
@media (min-width: 768px) {
  body.stage-active #v2StageBotNav:not(.stage-hidden) {
    display: flex !important;
    position: fixed; bottom: 22px; left: 0; right: 0;
    width: fit-content; margin: 0 auto;
    height: auto; padding: 6px 10px;
    background: rgba(7,11,24,0.97); backdrop-filter: blur(24px);
    border: 1px solid rgba(255,200,61,0.18); border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    transform: none;            /* stage-hidden'ın translateY'si kalıntı bırakmasın */
    z-index: 450;
  }
  body.stage-active #v2StageBotNav:not(.stage-hidden) .v2-bn-items { width: auto; padding: 0; gap: 4px; }
  body.stage-active #v2StageBotNav:not(.stage-hidden) .v2-bn-item { flex: 0 0 auto; padding: 8px 18px; }
}

/* ── YATAY / ALÇAK EKRAN (tablet yatay, telefon yatay) ──
   Ekran yüksekliği azalınca şerit ve menü ekran dışına taşıp "kayboluyordu".
   Yükseklik sınırlanıp kaydırılabilir yapılıyor, boşluklar küçültülüyor. */
@media (max-height: 620px) {
  #stageToolsPanel {
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
    padding: 8px !important;
  }
  body.stage-active #v2StageBotNav:not(.stage-hidden) { bottom: 10px; padding: 4px 8px; }
  body.stage-active #v2StageBotNav:not(.stage-hidden) .v2-bn-item { padding: 6px 14px; }
  #v2StageBotNav .v2-bn-label { font-size: 8px; }
  .sm { padding-top: 14px; padding-bottom: 64px; }
  .wtitle { font-size: clamp(17px, 2.6vw, 24px); margin-bottom: 6px; }
  .wkarar { margin: -2px 0 6px; }
}

@media (min-width: 1024px) {
  #pickerScreen {
    position: fixed !important;
    top: 0; left: 220px; right: 0; bottom: 0;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 48px;
  }
  #pickerScreen.hidden { display: none !important; }
  /* Alt nav desktop'ta gizle */
  #v2StageBotNav { display: none !important; }
  /* ...ama sahne modunda "Navigasyon" (☰) butonuyla BİLEREK açıldığında göster.
     Aksi halde openStageNav() çalışsa bile display:none !important yüzünden hiçbir
     şey görünmüyor ve buton tepkisiz sanılıyor. 4sn sonra stage-hidden geri gelir. */
  body.stage-active #v2StageBotNav:not(.stage-hidden) {
    display: flex !important;
    position: fixed; bottom: 22px; left: 0; right: 0;
    width: fit-content; margin: 0 auto;      /* butonlar kadar geniş, ortalanmış */
    height: auto; padding: 6px 10px;
    background: rgba(7,11,24,0.97); backdrop-filter: blur(24px);
    border: 1px solid rgba(255,200,61,0.18); border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    z-index: 450;
  }
  /* İçerideki öğeler eşit paylaşıp yayılmasın — kendi genişliklerinde dursun */
  body.stage-active #v2StageBotNav:not(.stage-hidden) .v2-bn-items { width: auto; padding: 0; gap: 4px; }
  body.stage-active #v2StageBotNav:not(.stage-hidden) .v2-bn-item { flex: 0 0 auto; padding: 8px 18px; }
  /* Sahne aktifken sidebar gizle, picker tam genişlik */
  body.stage-active .sidebar { display: none !important; }
}

/* (2026-08-06) Bilgi düğmesi sekme kutusunun içinde: sekmelerle AYNI yükseklik
   ve köşe yarıçapı, ama accent zemin yok (mod seçmiyor, panel açıyor).
   Belirginlik için ikon rengi --text ve hafif bir zemin verildi. */
.vm-sep{width:1px;height:20px;background:var(--border);margin:0 3px;flex-shrink:0;}
/* (2026-08-24) "Bilgi" etiketi eklendi: sekmeler basligin altina inince yer
   acildi, ikon tek basina ne oldugu belli olmuyordu. Sabit 38px genislik
   metni kirpardi — otomatik genislige gecildi. Dar ekranda (<=430px) etiket
   Soz/Akor/Nota ile birlikte gizlenir, ikon kalir. */
.stage-info-btn{background:rgba(255,255,255,.05);border:none;min-width:38px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text);cursor:pointer;transition:background .14s,color .14s;flex-shrink:0;padding:0 11px;font-size:13px;font-weight:600;font-family:inherit;}
.stage-info-btn .ti{font-size:19px;line-height:1;}
.stage-info-btn:hover{background:rgba(255,255,255,.12);color:var(--accent);}
body.stage-light .stage-info-btn{background:rgba(0,0,0,.05);}
.info-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:598;display:none;}
.info-sheet-backdrop.open{display:block;}
.info-sheet{position:fixed;left:0;right:0;bottom:0;background:#1a1a2e;border-radius:18px 18px 0 0;padding:8px 20px 24px;z-index:599;box-shadow:0 -8px 30px rgba(0,0,0,.5);transform:translateY(100%);transition:transform .25s ease;max-height:70vh;overflow-y:auto;}
.info-sheet.open{transform:translateY(0);}
.info-sheet-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);margin:6px auto 14px;}
.info-sheet-header{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;color:#fff;margin-bottom:12px;}
.info-sheet-close{background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;padding:4px;display:flex;}
.info-sheet-close:hover{color:#fff;}
.info-sheet-body{display:flex;flex-direction:column;gap:10px;}
.sip-row{display:flex;align-items:center;gap:8px;font-size:13px;}
.sip-label{color:rgba(255,255,255,0.5);font-size:11px;min-width:80px;}
.sip-val{color:#fff;font-weight:600;}
</style>
<script src="i18n.js"></script>
<script src="auth.js"></script>
<style id="v2-stage-nav">
/* Gündüz teması (sahne performans ekranındaki okuma teması — ayrı bir sistem) */
body.day-theme{--bg:#f5f4f0;--surface:#fff;--surface2:#f0eeea;--border:#d8d4cc;--accent:#7c6fff;--accent2:#a78bfa;--text:#1a1825;--text2:#5a5670;--text3:#9d9aae;}
</style>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.44.0/dist/fonts/tabler-icons.woff2?v3.44.0" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.44.0/dist/tabler-icons.min.css">
  <link rel="manifest" href="manifest.json">
  <script src="db.js"></script>
</head>
<body>
<div id="r-topnav-container"></div>
<script src="topnav.js"></script>


<div class="screen" id="pickerScreen">
  <button onclick="openStageNav()" title="Menü" data-i18n-title="sh.menu" style="position:fixed;bottom:20px;right:16px;z-index:500;width:44px;height:44px;border-radius:50%;background:rgba(124,111,255,0.15);border:1px solid rgba(124,111,255,0.35);color:#7c6fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);display:none;"><i class="ti ti-layout-navbar" style="font-size:20px;"></i></button>
  <div class="pi">
    <div class="pi-fixed-top">
      <h1 class="ptitle" data-i18n="sh.hosgeldin">Sahne Moduna Hoş Geldiniz</h1>
      <p class="psub" data-i18n="sh.repSec">Sahne performansınız için bir repertuvar seçiniz</p>
      <input type="text" id="stageSearchInput" placeholder="Repertuvar veya eser adı ara..." data-i18n-ph="sh.araPh" oninput="onStageSearchInput(this.value)"
        style="width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--text);font-family:inherit;outline:none;margin-bottom:16px;transition:border-color .15s;box-sizing:border-box;"
        onfocus="this.style.borderColor='#FFC83D'" onblur="this.style.borderColor='var(--border)'">
    </div>
    <div class="pi-scroll">
      <div class="rsl" id="rsl"><div class="loading" data-i18n="ortak.yukleniyor">Yükleniyor...</div></div>
    </div>
    <div class="pi-fixed-bottom">
      <button class="bstart" id="bstart" disabled onclick="startStage()"><span data-i18n="sh.sahneyeCik">Sahneye Çık →</span></button>
      <div style="display:flex;gap:8px;justify-content:center;margin-top:16px;">
        <div id="tc-day" onclick="setTheme('day')" style="padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid rgba(148,148,168,0.18);color:#8b8aa8;cursor:pointer;transition:all .15s;"data-i18n="sh.gunduz">☀️ Gündüz</div>
        <div id="tc-night" onclick="setTheme('night')" style="padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid rgba(148,148,168,0.18);color:#8b8aa8;cursor:pointer;transition:all .15s;"data-i18n="sh.gece">🌙 Gece</div>
      </div>
    </div>
  </div>
</div>

<div class="screen hidden" id="stageScreen">
  <!-- (2026-08-06) Üst bar İKİ SATIR: üstte görünüm menüsü (Söz/Akor/Nota + i),
       altında repertuvar adı ve sayfa noktaları. Eskiden üçü tek satırdaydı;
       ad kısalıp (%32 tavan) noktalar sıkışıyordu. -->
  <div class="stb">
    <div class="stb-r2">
      <div class="strn" id="strn">—</div>
      <div class="stp">
        <div class="pds" id="pds"></div>
        <div class="stc" id="stc">1/1</div>
        <div class="medley-badge" id="medleyBadge"></div>
      </div>
    </div>
  </div>
  <div class="info-sheet-backdrop" id="infoSheetBackdrop" onclick="closeInfoSheet()"></div>
  <div class="info-sheet" id="infoSheet">
    <div class="info-sheet-handle"></div>
    <div class="info-sheet-header">
      <span data-i18n="sh.eserBilgileri">Eser Bilgileri</span>
      <button class="info-sheet-close" onclick="closeInfoSheet()"><i class="ti ti-x" style="font-size:18px;"></i></button>
    </div>
    <div class="info-sheet-body" id="stageInfoPanel"></div>
  </div>
  <button class="side-nav-btn side-nav-left"  id="sideLeft"  onclick="event.stopPropagation();prevWork()"><i class="ti ti-chevron-left" style="font-size:22px;"></i></button>
  <div class="smhead" id="smHead"></div>
  <!-- (2026-08-24) GORUNUM SEKMELERI BASLIGIN ALTINA ALINDI.
       Eskiden ust barin ilk satirindaydi: sayfayi acan kisi once sekmeleri,
       sonra repertuvar adini, en son eser adini goruyordu. Sahnede once
       "hangi eser, hangi karar" bilgisi okunur; sekmeler ondan sonra gelir. -->
  <div class="stb-r1">
    <div class="vm-tabs" id="viewModeTabs" role="tablist" aria-label="Görünüm" data-i18n-aria="sh.gorunum">
      <button class="vm-tab" data-mode="lyrics" role="tab" title="Söz" data-i18n-title="sh.soz" onclick="event.stopPropagation();setViewMode('lyrics')"><i class="ti ti-music" aria-hidden="true"></i><span class="vm-lbl" data-i18n="sh.soz">Söz</span></button>
      <button class="vm-tab" data-mode="chords" role="tab" title="Akor" data-i18n-title="sh.akor" onclick="event.stopPropagation();setViewMode('chords')"><i class="ti ti-guitar-pick" aria-hidden="true"></i><span class="vm-lbl" data-i18n="sh.akor">Akor</span></button>
      <button class="vm-tab" data-mode="nota" role="tab" title="Nota" data-i18n-title="sh.nota" onclick="event.stopPropagation();setViewMode('nota')"><i class="ti ti-file-music" aria-hidden="true"></i><span class="vm-lbl" data-i18n="sh.nota">Nota</span></button>
      <span class="vm-sep" aria-hidden="true"></span>
      <button class="stage-info-btn" onclick="event.stopPropagation();openInfoSheet()" title="Eser Bilgileri" data-i18n-title="sh.eserBilgileri" aria-label="Eser Bilgileri" data-i18n-aria="sh.eserBilgileri">
        <i class="ti ti-info-circle" aria-hidden="true"></i><span class="vm-lbl" data-i18n="sh.bilgi">Bilgi</span>
      </button>
    </div>
  </div>
  <div class="sm" id="sm"></div>
  <button class="side-nav-btn side-nav-right" id="sideRight" onclick="event.stopPropagation();nextWork()"><i class="ti ti-chevron-right" style="font-size:22px;"></i></button>
  <div class="sb">
    <div class="sb-menu">
      <button onclick="toggleStageTools(event)" id="stageToolsToggle" title="Görünüm Ayarları" data-i18n-title="sh.gorunumAyarlari" class="sb-menu-btn"><i class="ti ti-adjustments-horizontal"></i></button>
      <div id="stageToolsPanel" style="display:none;position:fixed;bottom:80px;right:12px;width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;overflow-x:hidden;border-radius:12px;padding:8px 12px;z-index:9999;">
        <div id="stageToolsRow"></div>
      </div>
    </div>
    <!-- (2026-08-06) Kart yatay kuruldu: solda "Sıradaki" + eser adı, dikey
         ayraç çizgisi, sağda iki satır bilgi (makam/usul ve karar sesi).
         Böylece kartın yüksekliği iki satır kadar — eskiden üç satır alt
         alta diziliyordu. -->
    <!-- (2026-08-06) Kart İKİ SATIR: üstte "Sıradaki" etiketi + eser adı YAN YANA,
         altta makam · usul · karar sesi TAM GENİŞLİKTE. Önceki denemede bilgiler
         sağda dar bir sütuna sıkışıp üçü birden kırpılıyordu ("Uş… | 4/4 - … | D..").
         Etiket yazmıyoruz: Karcığar'ın makam, 4/4'ün usul, La'nın karar sesi
         olduğu belli; değerler ince dikey çizgilerle ayrılıyor. -->
    <div class="np" id="np" style="display:none;">
      <div class="np-top">
        <span class="nl" data-i18n="sh.siradaki">Sıradaki</span>
        <span class="nn" id="nn">—</span>
      </div>
      <div class="np-side" id="npSide"></div>
    </div>
    <!-- (2026-08-06) Yazı boyutu kontrolü alt şeritten Görünüm Ayarları
         paneline taşındı ("Yazı Boyutu" bloğu). Burada A−, kaydırıcı ve A+
         diye ÜÇ kontrol aynı işi yapıyordu; panelde tek kaydırıcı kaldı.
         Alt şerit böylece yalnızca "Sıradaki" bilgisini taşıyor. -->
    <div class="th" style="display:none;" data-i18n-html="sh.ipucu">Ekrana dokun veya<br><kbd>→</kbd> <kbd>Space</kbd> ile ilerle<br><kbd>←</kbd> ile geri dön</div>
  </div>
</div>

<div class="screen hidden" id="endScreen">
  <div class="ei">🎉</div>
  <h1 class="et" data-i18n="sh.bravo">Bravo!</h1>
  <p class="es" id="ern" data-i18n="sh.repTamamlandi">Repertuvar tamamlandı</p>
  <p class="ec" id="erc" data-i18n="sh.eserSayisiSifir">0 eser</p>
  <div class="ea">
    <button class="be bep" onclick="restartStage()"><span data-i18n="sh.bastanBasla">↺ Baştan Başla</span></button>
    <button class="be beg" id="btnRepertuvarSec" onclick="backToPicker()"><span data-i18n="sh.repertuvarSec">Repertuvar Seç</span></button>
    <a href="index.html" class="be beg" id="btnAnaSayfa" data-i18n="sh.anaSayfa">Ana Sayfa</a>
  </div>
</div>

<script>
// (2026-08-19) 🐞 SAHNE SUNUCUYA ANONİM SORUYORDU — ÖZEL REPERTUVARLAR GÖRÜNMÜYORDU.
// Belirti (Emir, admin): Repertuvarlar'dan "Emir Gündoğdu Özel Repertuvarı" seçilip
// "Sahne modunda aç" denince sahnedeki listede YALNIZCA genel (herkese açık)
// repertuvarlar çıkıyordu. KÖK SEBEP: bu başlık nesnesi Authorization olarak
// kullanıcının oturum jetonunu değil ANON ANAHTARI gönderiyordu; RLS açısından
// istek "giriş yapmamış ziyaretçi" demek, dolayısıyla `repertoires_read`
// politikasından yalnız `visibility='public'` satırlar dönüyordu. Kendi özel
// repertuvarların, grup repertuvarların ve kişisel paylaşımlar sunucudan HİÇ
// gelmiyordu. Şimdiye kadar gizlenmesinin sebebi: loadReps() önce yerel
// IndexedDB önbelleğinden dönüyor ve orada doğru veri vardı — önbellek boşsa
// (özel pencere, yeni cihaz, temizlenmiş depo) sahne çıplak kalıyordu.
// Aynı dosyada zaten doğru desen vardı (kişisel akor isteğinde
// localStorage['sb_token'] kullanılıyor); burada da o kullanılıyor.
function _stageToken(){
  try { return localStorage.getItem('sb_token') || SUPA_KEY; } catch(e) { return SUPA_KEY; }
}
const H = new Proxy({}, {
  get(_, k){
    const t = {'apikey':SUPA_KEY,'Authorization':'Bearer '+_stageToken(),'Content-Type':'application/json'};
    return t[k];
  },
  ownKeys(){ return ['apikey','Authorization','Content-Type']; },
  getOwnPropertyDescriptor(){ return {enumerable:true, configurable:true}; }
});

let WL = {}, WL_loaded = false, _stageShowsPlaceholder = false; // WL_loaded: yükleme bitti mi; _stageShowsPlaceholder: sahnede şu an gerçek ad yerine placeholder/… gösteriliyor mu

// ── Çevrimdışı bildirimi (repertuvarlar/eserler ile aynı davranış) ──
// Bağlantı GERÇEKTEN yoksa (navigator offline) ve veri yerelden gösteriliyorsa,
// sayfa başına EN FAZLA bir kez "çevrimdışı" toast'ı göster. Online'ken sadece
// bir fetch timeout olduysa sessiz kal (yanıltıcı olmasın).
let _stageOfflineToastShown = false;
function stageToast(text){
  const m=document.createElement('div');
  m.style.cssText='position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#238636;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;z-index:9999;box-shadow:0 4px 14px rgba(0,0,0,.4);';
  m.textContent=text; document.body.appendChild(m); setTimeout(()=>m.remove(),2800);
}
function stageOfflineToast(){
  if (_stageOfflineToastShown) return;
  if (navigator.onLine === false){ _stageOfflineToastShown = true; stageToast(_sCev('sh.cevrimdisi','📵 Çevrimdışı mod — yerel veriler gösteriliyor')); }
}

async function loadWL() {
  try {
    let rows = [];
    try {
      // (2026-08-19) ÖNCE OTURUM JETONU, GEREKİRSE ANON'A DÜŞ.
      // Eski hâli yalnızca ANON key kullanıyordu; gerekçesi "works paylaşılan
      // referans veri, süresi dolmuş jeton 401 verip listeyi boş bırakmasın" idi.
      // O gerekçe görünürlük modeli gelmeden önce geçerliydi: artık RLS anon
      // isteğe SADECE visibility='public' eserleri veriyor ⇒ repertuvardaki
      // gizli ya da gruba açık eserlerin GÜFTE/AKORU sahnede boş kalıyordu.
      // Doğrusu: jetonla dene, istek başarısızsa (401/süresi dolmuş) anon ile
      // tekrar dene — böylece hem yetki hem eski dayanıklılık korunuyor.
      // (2026-08-22) ANON'A DÜŞME DARALTILDI — OTURUM VARSA ARTIK DÜŞÜLMÜYOR.
      // Yukarıdaki gerekçe (jetonla dene, olmazsa anon) EKSİKTİ ve sahnede en
      // pahalı yerde patlıyordu. Emir'in yaşadığı belirti (repertuvar sayfası,
      // aynı desen): telefondan eklenen GİZLİ eser masaüstünde "#<id>" ve
      // "söz eklenmemiş" göründü; çıkış-giriş yapınca düzeldi. Sebep, jeton
      // bayatlayınca sessizce anon'a düşülmesi — anon istekte RLS yalnız
      // visibility='public' eserleri veriyor, gizli/gruba açık eserin GÜFTESİ
      // sahnede BOŞ kalıyor. Sahnede bunun bedeli çok yüksek.
      //
      // auth.js zaten doğrusunu yapıyor: istekten önce jetonu tazeliyor,
      // 401'de zorla yenileyip isteği bir kez tekrarlıyor, oturum kalıcı
      // ölüyse isteği engelleyip oturumu sonlandırıyor. Anon yedek yolu tam da
      // bu mekanizmayı etkisiz kılıyordu (anon istek yamadan muaf geçiyor).
      // Anon yolu KALDIRILMADI, daraltıldı: oturumu OLMAYAN ziyaretçi
      // (paylaşım bağlantısıyla gelen) genel eserleri görmeye devam etsin.
      const _worksUrl = SUPA_URL+'/rest/v1/works?select=*&deleted_at=is.null&order=id&limit=2000';
      const _oturumVar = !!localStorage.getItem('sb_token');
      let r = await fetch(_worksUrl, {
        headers: _oturumVar ? H : {'apikey': SUPA_KEY, 'Authorization': 'Bearer '+SUPA_KEY},
        signal: AbortSignal.timeout(3500)
      });
      if (!r.ok && _oturumVar) {
        // Eksik güfteyle sahneye çıkmaktansa dürüst ol: WL varsa önbellekten
        // geleni kullanmaya devam ediyoruz, yalnız tazeleme atlanıyor.
        console.warn('[stage] works alınamadı ('+r.status+') — anon\'a DÜŞÜLMÜYOR, oturum var');
      }
      if (!r.ok) throw new Error('works '+r.status);
      const fetched = await r.json();
      if (!Array.isArray(fetched) || !fetched.length) throw new Error('works bos/gecersiz yanit');
      rows = fetched;
      // Online'dan geldi — IndexedDB'yi güncelle
      if (window.db) await db.works.saveAll(rows);
    } catch(fetchErr) {
      console.warn('[stage] Supabase ulaşılamadı, IndexedDB kullanılıyor');
      if (window.db) rows = await db.works.getAll();
      stageOfflineToast(); // bağlantı yoksa ve yerelden gösteriliyorsa bildir (kendi içinde offline kontrolü var)
    }
    rows.forEach(w => {
      WL[String(w.id)] = {
        name: w.name || '',
        composer: w.composer || '',
        lyricWriter: w.lyric_writer || '',
        makam: w.makam || '',
        instrument: w.instrument || '',
        closingNote: w.closing_note || '',
        tuning: w.tuning || '',
        form: w.form || '',
        measurement: w.measurement || '',
        region: w.region || '',
        lyrics: w.lyrics || '',
        chords: w.chords || '',
        notaUrl: w.nota_url || '',
        // 2026-07-20: çok sayfalı nota — nota_pages asıl kaynak, yoksa tek nota_url'e düş
        notaPages: Array.isArray(w.nota_pages) ? w.nota_pages.filter(Boolean) : (w.nota_url ? [w.nota_url] : [])
      };
    });
    // customWorks patch
    try {
      const customs = JSON.parse(localStorage.getItem('customWorks') || '[]');
      customs.forEach(w => {
        const id = String(parseInt(w.id));
        if(WL[id]) Object.assign(WL[id], {name:w.name||WL[id].name, lyrics:w.lyrics!==undefined?w.lyrics:WL[id].lyrics, composer:w.composer||WL[id].composer, notaUrl:w.notaUrl!==undefined?w.notaUrl:WL[id].notaUrl, notaPages: Array.isArray(w.notaPages)? w.notaPages.filter(Boolean) : (WL[id].notaPages||[])});
        else WL[id] = {name:w.name||'',lyrics:w.lyrics||'',composer:w.composer||'',makam:w.makam||'',instrument:w.instrument||'',closingNote:w.closingNote||'',notaUrl:w.notaUrl||''};
      });
    } catch(e) {}
    // Kişisel akor overlay — kullanıcının kendi akoru varsa sahne görünümü ondan türer
    try {
      const uid = (typeof getUserId==='function') ? getUserId() : null;
      if (uid) {
        const tok = localStorage.getItem('sb_token') || SUPA_KEY;
        const _pH = {'apikey':SUPA_KEY,'Authorization':'Bearer '+tok};
        // transpose sütunu yoksa istek 400 döner — sütunsuz tekrar dene, yoksa
        // kişisel AKORLAR da yüklenmez (sessiz yan hasar).
        let pr = await fetch(SUPA_URL+'/rest/v1/personal_chords?select=work_id,chords,transpose&user_id=eq.'+uid, {
          headers:_pH, signal: AbortSignal.timeout(4000)
        });
        if (!pr.ok) {
          console.warn('[stage] transpose sütunu yok gibi — SQL çalıştırıldı mı? Sütunsuz deneniyor.');
          pr = await fetch(SUPA_URL+'/rest/v1/personal_chords?select=work_id,chords&user_id=eq.'+uid, {
            headers:_pH, signal: AbortSignal.timeout(4000)
          });
        }
        // (2026-08-21) Kişisel NOTLAR — akorlarla aynı turda, ayrı tablodan.
        // Ayrı `try` DEĞİL, aynı blokta: yetki/ağ sorununda ikisi de sessizce
        // atlanır, sahne yine açılır. Tablo yoksa 404/400 döner, yutulur.
        try {
          const nr = await fetch(SUPA_URL+'/rest/v1/personal_work_notes?select=work_id,note&user_id=eq.'+uid, {
            headers:_pH, signal: AbortSignal.timeout(4000)
          });
          if (nr.ok) {
            (await nr.json() || []).forEach(x => {
              if (x.note) PERSONAL_NOTES[String(parseInt(x.work_id))] = x.note;
            });
          }
        } catch(e) {}
        // Sahnede notu gösterme tercihi HESAPTA saklanıyor (cihazda değil):
        // telefonda kapatınca tablette de kapalı gelsin.
        try {
          const cr = await fetch(SUPA_URL+'/rest/v1/profiles?select=sahne_kisisel_not&id=eq.'+uid, {
            headers:_pH, signal: AbortSignal.timeout(4000)
          });
          if (cr.ok) {
            const crows = await cr.json();
            if (crows && crows.length && crows[0].sahne_kisisel_not === false) KNOT_GOSTER = false;
          }
        } catch(e) {}
        if (pr.ok) {
          const prows = await pr.json();
          (prows||[]).forEach(x => {
            const id = String(parseInt(x.work_id));
            // Ton kaydırma eser başına saklanır (0 ise satır olsa bile etkisiz)
            if (x.transpose) TRANSPOSE[id] = parseInt(x.transpose) || 0;
            if (!x.chords) return;
            const lyr = x.chords.split('\n').filter(l=>!/^\s*\{.*\}\s*$/.test(l)).map(l=>l.replace(/\[[^\]]*\]/g,'')).join('\n').replace(/[ \t]+$/gm,'').trim();
            if (WL[id]) { WL[id].chords = x.chords; WL[id].lyrics = lyr; }
            else WL[id] = { name:'', lyrics: lyr, chords: x.chords, composer:'', makam:'', instrument:'', closingNote:'', notaUrl:'' };
          });
        }
      }
    } catch(e) { /* offline / yetki yok — kişisel katman atlanır */ }
  } catch(e) { console.error('WL yüklenemedi:', e); }
  finally { WL_loaded = true; } // works yükleme denemesi bitti (başarılı/başarısız)
}// (2026-08-21) KİŞİSEL ESER NOTU — sahnede SALT OKUNUR gösterim.
// Düzenleme bilerek yok: sahnede klavye açmak, yanlış dokunuşla şarkı
// ortasında düzenleme moduna düşmek demek. Yazma yeri eser detayı ve
// repertuvar listesindeki alt sayfa.
let PERSONAL_NOTES = {};        // {String(work_id): metin}
let KNOT_GOSTER = true;         // hesap tercihi; profiles.sahne_kisisel_not
let _knotAcikId = null;         // uzun not hangi eserde açık (esere özel)

function _knotEsc(t){
  return (t == null ? '' : String(t)).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

// İlk satır görünür — not OLDUĞU anlaşılsın; uzunsa dokununca açılır, tekrar
// dokununca kapanır. Açıklık esere bağlı: sonraki esere geçince kapalı başlar.
function knotSahneHtml(workId){
  if (!KNOT_GOSTER) return '';
  const not = PERSONAL_NOTES[String(workId)];
  if (!not) return '';
  const cokSatir = not.indexOf('\n') !== -1 || not.length > 60;
  const acik = _knotAcikId === String(workId);
  return '<div class="knot-sahne' + (acik ? ' acik' : '') + '" onclick="knotSahneAc(event,\'' + workId + '\')"' +
         ' title="' + _sCev('sh.knotT','Kişisel notun — yalnızca sen görürsün') + '">' +
         '<i class="ti ti-lock" aria-hidden="true"></i>' +
         '<span class="kn-tx">' + _knotEsc(not) + '</span>' +
         (cokSatir ? '<span class="kn-dh">' + (acik ? _sCev('sh.knKapat','kapat') : _sCev('sh.knAc','aç')) + '</span>' : '') +
         '</div>';
}

function knotSahneAc(ev, workId){
  if (ev) { ev.stopPropagation(); ev.preventDefault(); }
  _knotAcikId = (_knotAcikId === String(workId)) ? null : String(workId);
  try { renderStage(); } catch(e) {}
}

// Panelden aç/kapa. Tercih HESABA yazılıyor; yazma başarısız olsa da ekranda
// hemen uygulanıyor — sahnede "düğmeye bastım bir şey olmadı" hissi olmasın.
async function knotGosterToggle(ev){
  if (ev) ev.stopPropagation();
  KNOT_GOSTER = !KNOT_GOSTER;
  _knotAcikId = null;
  try { renderStage(); } catch(e) {}
  try { buildStageToolsRow(_tonSonMode); } catch(e) {}
  try {
    const uid = (typeof getUserId==='function') ? getUserId() : null;
    if (!uid) return;
    const tok = localStorage.getItem('sb_token') || SUPA_KEY;
    const r = await fetch(SUPA_URL+'/rest/v1/profiles?id=eq.'+uid, {
      method:'PATCH',
      headers:{'apikey':SUPA_KEY,'Authorization':'Bearer '+tok,'Content-Type':'application/json','Prefer':'return=representation'},
      body: JSON.stringify({ sahne_kisisel_not: KNOT_GOSTER })
    });
    if (!r.ok) { console.warn('[not] tercih yazılamadı — sütun/RLS?', r.status); return; }
    const rows = await r.json();
    if (!Array.isArray(rows) || !rows.length) console.warn('[not] tercih yazılmadı: sunucu 0 satır döndürdü');
  } catch(e) { console.warn('[not] tercih yazılamadı', e); }
}

let reps=[], selId=null, curRep=null, curIdx=0;

// repertoires.html'deki "Gizle" (hiddenRepIds, sadece client-side) ile tutarlı olsun diye —
// bir repertuvarı orada gizlersen burada da (sahne modunda) görünmemeli.
function getHiddenRepIds() {
  try { return JSON.parse(localStorage.getItem('hiddenRepIds') || '[]'); }
  catch(e) { return []; }
}

function buildRepsFromRaw(r, items) {
  const uid = getUserId();
  const hiddenIds = getHiddenRepIds();
  return (r||[])
    .filter(x => {
      const isOwner = x.owner_id === uid || x.user_id === uid;
      // (2026-08-20) YENİ GÖRÜNÜRLÜK MODELİ — GÖRÜNÜRLÜK KARARI SUNUCUDA.
      // Eski süzgeç "kendi + aktif grubun (group_id) + is_public" diyordu.
      // 2. aşamada görünürlük `repertoires.visibility` + `repertoire_group_shares`
      // + `repertoire_shares` (kişisel paylaşım) modeline geçti ve `repertoires_read`
      // politikası bunların HEPSİNİ çözüyor ⇒ elimize gelen her satır tanım gereği
      // görmeye YETKİLİ olduğumuz bir satır. Eski istemci kuralı ise ikisini
      // eliyordu: (a) gruba PAYLAŞIM SATIRIYLA açılmış ama `group_id`'si boş
      // repertuvarlar, (b) `repertoire_shares` ile doğrudan bana açılanlar.
      // Bu yüzden burada artık GÖRÜNÜRLÜK süzgeci yok; yalnız kullanıcının
      // kendi elleriyle gizlediği (hiddenRepIds) başkasına ait satırlar eleniyor.
      if (isOwner) return true;
      return !hiddenIds.includes(x.id);
    })
    // (2026-08-23) `performer` de tasiniyor — eser bazli kadro sahnede
    // bilgi panelinde gosteriliyor. Eskiden bu alan sahneye hic gelmiyordu.
    .map(x=>({...x,items:(items||[]).filter(t=>t.repertoire_id===x.id).sort((a,b)=>a.seq-b.seq).map(t=>({...t,workId:String(t.work_id),closingNote:t.closing_note||'',performer:t.performer||''}))}));
}

// (2026-08-20) YENİ MODEL — YEREL ÖNBELLEK SÜZGECİ KALDIRILDI.
// Bu fonksiyon IndexedDB'deki satırları süzüyordu; ama o önbelleğe zaten yalnız
// RLS'ten geçmiş satırlar yazılıyor (hem bu dosya hem repertoires.js sunucudan
// geleni `db.repertoires.replaceAll` ile koyuyor). Eski kural owner/group_id/
// is_public'e bakıyordu ⇒ kişisel paylaşımla bana açılmış bir repertuvar
// (visibility='private', repertoire_shares satırı var) önbellekte DURUYOR ama
// bu süzgeçte eleniyordu — sahnede hiç görünmüyordu. Geçiş fonksiyonu olarak
// bırakıldı ki çağrı yerleri değişmesin ve niyet kayda geçsin.
function repVisibilityFilterFn() {
  return () => true;
}
// Sunucu sorgusundan da istemci süzgeci kalktı: görünürlüğü artık yalnız
// `repertoires_read` politikası belirliyor (public / sahip / visibility='group'
// ∩ repertoire_group_shares ∩ my_group_ids() / repertoire_shares). RLS üst
// sınır olduğu için süzgeci kaldırmak FAZLADAN satır getirmez, yalnız eski
// kuralın yanlışlıkla eledikleri geri gelir. Aynı düzeltme repertoires.js'te
// de yapıldı — iki sayfa yine AYNI kapsamı görsün diye.
function repVisibilityQuery() {
  return '';
}

async function loadReps(){
  // ── 1) ÖNCELİKLE LOCAL'DEN ANINDA DÖN (sinyal zayıf/yokken bile beklemeden) ──
  let localR = [], localItems = [];
  if (window.db) {
    try {
      const allReps = await db.repertoires.getAll();
      localR = allReps.filter(repVisibilityFilterFn());
      localItems = await db.repertoire_items.getAll();
    } catch(e) { console.warn('[stage] local repertuvar okuma hatası:', e); }
  }

  // ── 2) ARKA PLANDA SUNUCUYLA SENKRONİZE ET, sonucu güncelle ──
  refreshRepsInBackground();

  return buildRepsFromRaw(localR, localItems);
}

async function refreshRepsInBackground(){
  try {
    const [r, items] = await Promise.all([
      fetch(SUPA_URL+'/rest/v1/repertoires?order=created_at'+(repVisibilityQuery() ? '&'+repVisibilityQuery() : ''),{headers:H, signal:AbortSignal.timeout(6000)}).then(r=>r.json()),
      fetch(SUPA_URL+'/rest/v1/repertoire_items?order=seq',{headers:H, signal:AbortSignal.timeout(6000)}).then(r=>r.json())
    ]);
    if (window.db) {
      await db.repertoires.replaceAll(r||[]);
      await db.repertoire_items.replaceAll(items||[]);
    }
    reps = buildRepsFromRaw(r, items);
    // Kullanıcı hâlâ seçim ekranındaysa listeyi tazele — sahnedeyken (performans sırasında) ekranı bozma.
    // Ayrıca tam o an bir kartı kaydırıyorsa (parmak hâlâ ekranda) veya bir panel açıksa,
    // DOM'u altından çekip garip bir ara-duruma sokmamak için yeniden çizimi erteliyoruz —
    // bir sonraki etkileşimde (dokunuş bitince) zaten güncel veriyle çizilecek.
    const picker = document.getElementById('pickerScreen');
    if (picker && !picker.classList.contains('hidden') && !_rsSwipe && !_rsOpenCard) {
      renderPicker();
    }
  } catch(e) {
    console.warn('[stage] arka plan senkronizasyonu başarısız (offline/zayıf sinyal):', e);
    stageOfflineToast(); // bağlantı yoksa ve picker yerelden gösteriliyorsa bildir
  }
}

let stageSearchQuery = '';

function onStageSearchInput(val) {
  stageSearchQuery = val || '';
  renderPicker();
}

function stageRepMatchesSearch(r, q) {
  if (!q) return true;
  const norm = s => (s || '').toLocaleLowerCase('tr');
  const nq = norm(q);
  if (norm(r.name).includes(nq)) return true;
  return (r.items || []).some(it => {
    const w = WL[it.workId] || {};
    return norm(w.name).includes(nq);
  });
}

function renderPicker(){
  const el=document.getElementById('rsl');
  if(!reps.length){el.innerHTML='<div style="padding:32px;text-align:center;color:var(--text3);line-height:1.8;">Henüz repertuvar yok.<br><a href="repertoires.html" style="color:var(--accent)">Repertuvar sayfasında</a> repertuvar oluşturun.</div>';return;}
  const filtered = reps.filter(r=>stageRepMatchesSearch(r, stageSearchQuery));
  if(stageSearchQuery && !filtered.length){el.innerHTML='<div style="padding:32px;text-align:center;color:var(--text3);">' + _sCev('sh.sonucYok','"{q}" için sonuç bulunamadı').replace('{q}', stageSearchQuery) + '</div>';return;}
  const sl={concept:_sCev('sh.dTaslak','Taslak'),confirmed:_sCev('sh.dOnaylandi','Onaylandı'),archive:_sCev('sh.dArsiv','Arşiv')};
  const uid = getUserId();
  el.innerHTML=filtered.map(r=>{
    const isOwner = r.owner_id === uid || r.user_id === uid;
    const cardHtml = `<div class="rsi${selId===r.id?' sel':''}" onclick="rsCardClick(event,'${r.id}')" ontouchstart="rsTouchStart(event)" ontouchmove="rsTouchMove(event)" ontouchend="rsTouchEnd(event)" ontouchcancel="rsTouchEnd(event)">
      <div><div class="rsn">${r.name}</div><div class="rsm">${[r.date,r.venue,sl[r.status]].filter(Boolean).join(' · ')}</div></div>
      <div class="rsc">${(r.items||[]).length} eser</div>
    </div>`;
    const editBg = `<div class="rs-edit-bg" onclick="event.stopPropagation();rsCloseOpenCard();window.location.href='repertoires.html?rep=${r.id}'"><i class="ti ti-edit"></i>Değiştir</div>`;
    const rightBg = isOwner
      ? `<div class="rs-delete-bg" onclick="event.stopPropagation();rsCloseOpenCard();rsDeleteRep('${r.id}')"><i class="ti ti-trash"></i>Sil</div>`
      : `<div class="rs-delete-bg rs-hide-bg" onclick="event.stopPropagation();rsCloseOpenCard();rsHideRep('${r.id}')"><i class="ti ti-eye-off"></i>Gizle</div>`;
    return `<div class="rs-wrap">${editBg}${rightBg}${cardHtml}</div>`;
  }).join('');
}

// ── İki yönlü kaydırma (repertuvarlardaki riTouchStart/Move/End deseninin aynısı) ──
const RS_SWIPE_THRESHOLD = 44;
const RS_SWIPE_MAX = 84;
let _rsSwipe = null;
let _rsOpenCard = null;

function rsCloseOpenCard() {
  if (_rsOpenCard) {
    _rsOpenCard.style.transition = 'transform .2s ease';
    _rsOpenCard.style.transform = 'translateX(0)';
    _rsOpenCard.classList.remove('swiped-open-left', 'swiped-open-right');
    const wrap = _rsOpenCard.closest('.rs-wrap');
    if (wrap) { wrap.style.transition = 'opacity .2s ease'; wrap.style.setProperty('--swipe-glow', 0); }
    _rsOpenCard = null;
  }
}

function rsTouchStart(e) {
  if (_rsOpenCard && _rsOpenCard !== e.currentTarget) rsCloseOpenCard();
  const t = e.touches[0];
  _rsSwipe = { card: e.currentTarget, startX: t.clientX, startY: t.clientY, dx: 0, dir: null };
}

function rsTouchMove(e) {
  if (!_rsSwipe || _rsSwipe.card !== e.currentTarget) return;
  const t = e.touches[0];
  const dx = t.clientX - _rsSwipe.startX;
  const dy = t.clientY - _rsSwipe.startY;
  if (_rsSwipe.dir === null) {
    if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
      _rsSwipe.dir = Math.abs(dx) > Math.abs(dy) ? 'h' : 'v';
    }
  }
  if (_rsSwipe.dir === 'v') { _rsSwipe = null; return; }
  if (_rsSwipe.dir === 'h') {
    e.preventDefault();
    let base = 0;
    if (_rsSwipe.card.classList.contains('swiped-open-right')) base = -RS_SWIPE_MAX;
    else if (_rsSwipe.card.classList.contains('swiped-open-left')) base = RS_SWIPE_MAX;
    const clamped = Math.min(RS_SWIPE_MAX, Math.max(base + dx, -RS_SWIPE_MAX));
    _rsSwipe.dx = clamped;
    _rsSwipe.card.style.transition = 'none';
    _rsSwipe.card.style.transform = `translateX(${clamped}px)`;
    const wrap = _rsSwipe.card.closest('.rs-wrap');
    if (wrap) wrap.style.setProperty('--swipe-glow', Math.min(1, Math.abs(clamped) / RS_SWIPE_MAX));
  }
}

function rsTouchEnd(e) {
  if (!_rsSwipe) return;
  // Yatay swipe değilse (merkeze tıklama / dikey / belirsiz hareket): kartı
  // yarı-kaymış bırakma — açıksa açık konumuna, değilse translateX(0)'a çek.
  if (_rsSwipe.dir !== 'h') {
    const c = _rsSwipe.card;
    c.style.transition = 'transform .2s ease';
    if (c.classList.contains('swiped-open-left')) {
      c.style.transform = `translateX(${RS_SWIPE_MAX}px)`;
    } else if (c.classList.contains('swiped-open-right')) {
      c.style.transform = `translateX(${-RS_SWIPE_MAX}px)`;
    } else {
      c.style.transform = 'translateX(0)';
      const w = c.closest('.rs-wrap');
      if (w) w.style.setProperty('--swipe-glow', 0);
    }
    _rsSwipe = null;
    return;
  }
  const card = _rsSwipe.card;
  card.style.transition = 'transform .2s ease';
  if (Math.abs(_rsSwipe.dx) > 5) card.dataset.justSwiped = '1';
  card.classList.remove('swiped-open-left', 'swiped-open-right');
  const wrap = card.closest('.rs-wrap');
  if (_rsSwipe.dx <= -RS_SWIPE_THRESHOLD) {
    card.style.transform = `translateX(${-RS_SWIPE_MAX}px)`;
    card.classList.add('swiped-open-right');
    if (wrap) wrap.style.setProperty('--swipe-glow', 1);
    _rsOpenCard = card;
  } else if (_rsSwipe.dx >= RS_SWIPE_THRESHOLD) {
    card.style.transform = `translateX(${RS_SWIPE_MAX}px)`;
    card.classList.add('swiped-open-left');
    if (wrap) wrap.style.setProperty('--swipe-glow', 1);
    _rsOpenCard = card;
  } else {
    card.style.transform = 'translateX(0)';
    if (wrap) { wrap.style.transition = 'opacity .2s ease'; wrap.style.setProperty('--swipe-glow', 0); }
    if (_rsOpenCard === card) _rsOpenCard = null;
  }
  _rsSwipe = null;
}

function rsCardClick(e, id) {
  const card = e.currentTarget;
  if (card.classList.contains('swiped-open-left') || card.classList.contains('swiped-open-right')) {
    rsCloseOpenCard();
    return;
  }
  if (card.dataset.justSwiped === '1') {
    delete card.dataset.justSwiped;
    return;
  }
  pickRep(id);
}

window.addEventListener('pageshow', () => {
  document.querySelectorAll('.rsi.swiped-open-left, .rsi.swiped-open-right').forEach(card => {
    card.classList.remove('swiped-open-left', 'swiped-open-right');
    card.style.transition = 'none';
    card.style.transform = 'translateX(0)';
    delete card.dataset.justSwiped;
    const wrap = card.closest('.rs-wrap');
    if (wrap) wrap.style.setProperty('--swipe-glow', 0);
  });
  _rsOpenCard = null;
  _rsSwipe = null;
});

// Açık bir swipe kartı varken ekranın herhangi bir yerine tıklanınca (kartın dışına) kapat.
// repertoires.js ve eserler.html'de bu satır vardı, stage.html'de eksikti — kartın
// yarı-açık takılı kalmasının ve iki kartın birden açık kalmasının sebebi buydu.
document.addEventListener('click', (e) => {
  if (_rsOpenCard && !_rsOpenCard.contains(e.target)) rsCloseOpenCard();
});

// Silme/gizleme, repertoires.js'deki delRep/hideRepFromView ile aynı davranışta —
// ama gerçek kullanıcı token'ı gerektiriyor (stage.html'in salt-okunur H'si SUPA_KEY
// kullanıyor, RLS altında silme için yetmez), o yüzden ayrı bir authenticated header.
const RS_AUTH_H = {
  get apikey() { return SUPA_KEY; },
  get Authorization() { return 'Bearer ' + (localStorage.getItem('sb_token') || SUPA_KEY); },
  'Content-Type': 'application/json'
};

async function rsDeleteRep(id) {
  if (!confirm(_sCev('sh.silOnay','Bu repertuvarı silmek istiyor musunuz?'))) return;
  try {
    const r = await fetch(SUPA_URL + '/rest/v1/repertoires?id=eq.' + id, { method: 'DELETE', headers: RS_AUTH_H });
    if (!r.ok) throw new Error(await r.text());
    if (selId === id) { selId = null; const b = document.getElementById('bstart'); if (b) b.disabled = true; }
    reps = reps.filter(x => x.id !== id);
    if (window.db) db.repertoires.delete(id).catch(()=>{});
    renderPicker();
  } catch (e) {
    alert(_sCev('sh.silHata','Silinirken bir hata oluştu: ') + e.message);
  }
}

function rsHideRep(id) {
  const hiddenIds = getHiddenRepIds();
  if (!hiddenIds.includes(id)) {
    hiddenIds.push(id);
    localStorage.setItem('hiddenRepIds', JSON.stringify(hiddenIds));
  }
  reps = reps.filter(x => x.id !== id);
  renderPicker();
}

function pickRep(id){selId=id;document.getElementById('bstart').disabled=false;renderPicker();}

function setLyricsAlign(align) {
  localStorage.setItem('stageLyricsAlign', align);
  const el = document.querySelector('.wlyrics');
  if (el) el.style.textAlign = align;
  ['left','center','right'].forEach(a => {
    const btn = document.getElementById('align' + a.charAt(0).toUpperCase() + a.slice(1));
    if (!btn) return;
    btn.classList.toggle('active', a === align);
  });
}

/* ── SAHNE SIĞDIRMA (2026-09-05) ────────────────────────────────────────
   Sorun: .wlyrics'te overflow-x:auto vardı. Sahnede yatay kaydırma işe
   yaramaz — müzisyen çalarken yana kaydıramaz, taşan akor görünmez kalır.
   Amaç TAŞMAYI ÖNLEMEK, boşluğu doldurmak değil: ölçek yalnızca küçültür,
   asla büyütmez.
   Kullanıcının sürgüsü ÜSTTE kalır: --fit-scale onun seçtiği --lyrics-scale'i
   çarpar, ezmez. Sürgüyü kısınca sığdırma da gevşer.
   Ölçek ESER BAŞINA hesaplanır (her renderStage'de sıfırlanır), satır başına
   değil — satır başına olsaydı aynı sayfada farklı puntolar olurdu.
   TABAN 14px: bunun altına inmek yerine yatay kaydırma geri açılır; okunmaz
   bir sayfa, kaydırılabilir bir sayfadan kötüdür. */
const FIT_MIN_PX = 14;
let _fitRaf = null;
function fitLyrics() {
  const el = document.querySelector('#stageScreen .wlyrics') || document.querySelector('.wlyrics');
  if (!el) return;
  const root = document.documentElement;
  root.style.setProperty('--fit-scale', 1);
  el.style.overflowX = 'hidden';
  // Taşma yoksa iş bitti — yaygın durum, tek ölçüm.
  if (el.scrollWidth <= el.clientWidth + 1) return;
  const basePx = parseFloat(getComputedStyle(el).fontSize) || 18;
  const minFit = Math.min(1, FIT_MIN_PX / basePx);
  let lo = minFit, hi = 1, best = minFit;
  for (let i = 0; i < 6; i++) {
    const mid = (lo + hi) / 2;
    root.style.setProperty('--fit-scale', mid);
    if (el.scrollWidth <= el.clientWidth + 1) { best = mid; lo = mid; }
    else { hi = mid; }
  }
  root.style.setProperty('--fit-scale', best);
  // Tabana rağmen sığmıyorsa kaydırmayı geri aç (uzun tek kelime, geniş akor).
  if (el.scrollWidth > el.clientWidth + 1) el.style.overflowX = 'auto';
}
function fitLyricsSoon() {
  if (_fitRaf) cancelAnimationFrame(_fitRaf);
  _fitRaf = requestAnimationFrame(() => { _fitRaf = null; fitLyrics(); });
}
window.addEventListener('resize', fitLyricsSoon);
window.addEventListener('orientationchange', fitLyricsSoon);

const LYRICS_SCALE_MIN = 0.75, LYRICS_SCALE_MAX = 1.6;
function setLyricsFontScale(scale) {
  scale = Math.min(LYRICS_SCALE_MAX, Math.max(LYRICS_SCALE_MIN, +parseFloat(scale).toFixed(2)));
  localStorage.setItem('stageLyricsScale', scale);
  document.documentElement.style.setProperty('--lyrics-scale', scale);
  updateFontSliderUI(scale);
  fitLyrics();   // (2026-09-05) sürgü kullanıcının; sığdırma onun üstünde çalışır
}
function updateFontSliderUI(scale) {
  const slider = document.getElementById('lyricsFontSlider');
  if (!slider) return;
  slider.value = scale;
  const pct = ((scale - LYRICS_SCALE_MIN) / (LYRICS_SCALE_MAX - LYRICS_SCALE_MIN)) * 100;
  slider.style.background = `linear-gradient(to right, var(--accent) 0%, var(--accent) ${pct}%, var(--border) ${pct}%, var(--border) 100%)`;
}
// A− / A+ butonları: kaydırıcıyla aynı ölçeği adım adım değiştirir (0.1'lik adım).
function stepLyricsFont(delta) {
  const cur = parseFloat(localStorage.getItem('stageLyricsScale')) || 1;
  setLyricsFontScale(cur + delta);
}

// ChordPro render: akorlar sözlerin içinde [Am] köşeli parantezle, ait olduğu
// hecenin önünde durur; ekranda o hecenin ÜSTÜNE yazılır. Standart ChordPro formatı.
// ── TON KAYDIRMA (± yarım ton) ──
// Eser başına saklanır (personal_chords.transpose). GÖRÜNÜM dönüşümüdür:
// kayıtlı akor metni ASLA değiştirilmez, sadece ekranda kaydırılmış gösterilir.
let TRANSPOSE = {}; // {work_id: yarım ton (+/-)}
const _CHROM_FLAT  = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B'];
const _NOTE_INDEX  = {'C':0,'B#':0,'C#':1,'Db':1,'D':2,'D#':3,'Eb':3,'E':4,'Fb':4,'E#':5,'F':5,'F#':6,'Gb':6,'G':7,'G#':8,'Ab':8,'A':9,'A#':10,'Bb':10,'B':11,'Cb':11};
function transposeNote(note, n) {
  const i = _NOTE_INDEX[note];
  if (i === undefined) return note;              // tanımadığımız kökü olduğu gibi bırak
  return _CHROM_FLAT[((i + n) % 12 + 12) % 12];  // Türk müziği yazımında bemol tercih edilir
}
// Tek bir akor jetonunu kaydır: kök + son ek + (varsa) /bas
function transposeChordToken(tok, n) {
  return tok.split('/').map(part => {
    const m = part.match(/^([A-G](?:#|b)?)(.*)$/);
    return m ? transposeNote(m[1], n) + m[2] : part;
  }).join('/');
}
// ChordPro metnindeki TÜM [akor] etiketlerini kaydır; sözlere dokunma
function transposeChordPro(text, n) {
  if (!text || !n) return text || '';
  return text.replace(/\[([^\]]+)\]/g, (full, inner) => '[' + transposeChordToken(inner.trim(), n) + ']');
}
function getTranspose(workId) { return TRANSPOSE[String(workId)] || 0; }

// ── KARAR SESİ (kaydırılmış) — eserler.html ile AYNI mantık ──
// Solfej ("La", "Sib") ve Latin ("A", "Bb") yazımını tanır; perde adı gibi
// tanımadıklarını kaydırmadan olduğu gibi bırakır (koma sesleri 12'liye oturmaz).
const _KARAR_LATIN = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B'];
const _KARAR_TR    = ['Do','Reb','Re','Mib','Mi','Fa','Solb','Sol','Lab','La','Sib','Si'];
const _KARAR_IN = {
  'do':0,'do#':1,'reb':1,'re':2,'re#':3,'mib':3,'mi':4,'fa':5,'fa#':6,'solb':6,
  'sol':7,'sol#':8,'lab':8,'la':9,'la#':10,'sib':10,'si':11,
  'c':0,'c#':1,'db':1,'d':2,'d#':3,'eb':3,'e':4,'f':5,'f#':6,'gb':6,
  'g':7,'g#':8,'ab':8,'a':9,'a#':10,'bb':10,'b':11
};
// (2026-08-13) Eşleşen HAM jetonu döndürür ('f#', 'solb'...). Hem indeks hem de
// kullanıcının diyez/bemol tercihi buradan türetiliyor — aynı ayrıştırma iki
// yerde tekrar edilmesin.
function _kararJeton(s){
  let t = (s||'').toString().toLowerCase().replace('♭','b').replace('♯','#');
  const k = t.trim().replace(/\s+/g,'');
  if (k in _KARAR_IN) return k;
  // Çift yazımı da tanı: "La (A)", "A (La)", "Sol / G", "Re - Neva".
  // Eskiden bunlar tanınmadığı için ses adı üretilemiyor, Ton kontrolü rakamsal
  // ± hâline düşüyordu. Parantez içi atılır, ilk anlamlı jetona bakılır.
  t = t.replace(/\([^)]*\)/g, ' ');
  for (const tok of t.split(/[^a-z#b]+/)) {
    if (tok && (tok in _KARAR_IN)) return tok;
  }
  return null;
}
function parseKararNote(s){
  const k = _kararJeton(s);
  return (k === null) ? null : _KARAR_IN[k];
}
// (2026-08-13) Kullanıcı karar sesini DİYEZLE mi yazmış? ("F#", "Fa#")
function _kararDiyezMi(s){
  const k = _kararJeton(s);
  return !!(k && k.charAt(k.length - 1) === '#');
}
// (2026-08-13) TON KAYDIRILMAMIŞKEN KULLANICININ YAZIMINA SADIK KAL.
// Belirti (Emir): karar sesi F# girilmiş, akorlar da F#m/Bm/E görünüyor ama
// rozette "Gb (Solb)" yazıyordu — aynı ekranda iki farklı yazım.
// Sebep: _KARAR_LATIN/_KARAR_TR yalnızca BEMOL tablosu; indeks 6 her hâlükârda
// Gb'ye çevriliyordu. Akor motoru ise n=0 iken metne HİÇ dokunmuyor
// (transposeChordPro'da `if(!text||!n) return text`), yazım olduğu gibi kalıyor.
// Artık karar rozeti de aynı kurala uyuyor: kaydırma yokken kullanıcının
// diyez/bemol tercihi korunur, KAYDIRILDIĞINDA bemol tablosuna dönülür —
// çünkü kaydırılmış akorlar da bemolle yazılıyor, ikisi tutarlı kalsın.
const _KARAR_LATIN_D = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
const _KARAR_TR_D    = ['Do','Do#','Re','Re#','Mi','Fa','Fa#','Sol','Sol#','La','La#','Si'];
function kararLabel(closingNote, n){
  const i = parseKararNote(closingNote);
  if (i === null) return null;
  const j = ((i + (n||0)) % 12 + 12) % 12;
  const d = !n && _kararDiyezMi(closingNote);
  return (d ? _KARAR_LATIN_D : _KARAR_LATIN)[j] + ' (' + (d ? _KARAR_TR_D : _KARAR_TR)[j] + ')';
}

// ± butonları: tonu kaydır, ekranı hemen tazele, sonra arka planda kaydet
function stepTranspose(delta) {
  const item = (curRep && (curRep.items||[])[curIdx]) || null;
  if (!item) return;
  const id = String(item.workId);
  let v = (getTranspose(id) + delta) % 12;      // bir oktavdan fazlası anlamsız
  if (v > 6) v -= 12; else if (v < -6) v += 12; // en yakın yazımda tut (-6..+6)
  TRANSPOSE[id] = v;
  renderStage();
  savePersonalTranspose(id, v);
}
function resetTranspose() {
  const item = (curRep && (curRep.items||[])[curIdx]) || null;
  if (!item) return;
  const id = String(item.workId);
  if (!getTranspose(id)) return;
  TRANSPOSE[id] = 0;
  renderStage();
  savePersonalTranspose(id, 0);
}
// ── (2026-08-13) TON KAYDIRICISI: rakam değil SES ADI ──────────────────────
// Sahnede "−3" hiçbir şey söylemiyor, "La" söylüyor. Kaydırıcı kromatik
// (−6…+6 yarım ton, ortası eserin ÖZGÜN tonu); ekranda görünen ise varılan
// karar sesinin ADI. Yazım biçimi kullanıcının ortak tercihine bağlı
// (akorYazim:<uid> → ABC ya da Do Re Mi), yani akorlarla hep aynı dilde.
// Karar sesi girilmemiş / tanınmayan (koma sesleri) eserlerde ad hesaplanamaz;
// orada eski ± adımlayıcıya düşülür — bkz. buildStageToolsRow.
let _tonAcik = false;          // Ton bloğu kaydırıcı hâlinde mi
let _tonKapatT = null;         // seçimden sonra kendiliğinden kapanma sayacı
let _tonSonMode = 'lyrics';    // panel yeniden kurulurken kullanılacak görünüm
let _tonAcikWid = '';          // kaydırıcının açık olduğu eser (esere geçilince kapanır)
const TON_MIN = -6, TON_MAX = 6;
// Varılan sesin adı: 'solfej' tercihinde "La", değilse "A". Bilinmiyorsa null.
function tonSesAdi(closingNote, n) {
  const i = parseKararNote(closingNote);
  if (i === null) return null;
  const j = ((i + (n||0)) % 12 + 12) % 12;
  const yazim = (typeof getAkorYazim === 'function') ? getAkorYazim() : 'abc';
  // Kaydırma yokken kullanıcının diyez yazımı korunur (bkz. kararLabel notu).
  const d = !n && _kararDiyezMi(closingNote);
  if (yazim === 'solfej') return (d ? _KARAR_TR_D : _KARAR_TR)[j];
  return (d ? _KARAR_LATIN_D : _KARAR_LATIN)[j];
}
// (2026-09-01) JS'ten yazilan metinler icin ceviri yardimcisi. data-i18n
// yalnizca HTML'de duran metinleri cozuyor; sahne ekraninin buyuk kismi
// calisma aninda uretiliyor. i18n yuklenmemisse Turkceye duser.
function _sCev(anahtar, tr) {
  try { return (window.i18n && window.i18n.t) ? window.i18n.t(anahtar, tr) : tr; }
  catch (e) { return tr; }
}

function _tonAktifItem() { return (curRep && (curRep.items||[])[curIdx]) || null; }
function _tonKararSesi() {
  const item = _tonAktifItem();
  if (!item) return '';
  return item.closingNote || (WL[String(item.workId)]||{}).closingNote || '';
}
// Kaydırıcının dolgu rengi (yazı boyutu kaydırıcısıyla aynı yöntem)
function updateTonSliderUI(v) {
  const s = document.getElementById('tonSlider');
  if (!s) return;
  s.value = v;
  // Dolgu ORTADAN başlar: rayın ortası eserin özgün tonu, dolgu ne kadar
  // uzaklaştığını gösterir (yazı boyutunda soldan dolduruyoruz, burada anlamı bu).
  const pct = ((v - TON_MIN) / (TON_MAX - TON_MIN)) * 100;
  const a = Math.min(50, pct), b = Math.max(50, pct);
  s.style.background = `linear-gradient(to right, var(--border) 0%, var(--border) ${a}%, var(--accent) ${a}%, var(--accent) ${b}%, var(--border) ${b}%, var(--border) 100%)`;
}
function tonKaydiriciAc(e) {
  if (e && e.stopPropagation) e.stopPropagation();
  clearTimeout(_tonKapatT);
  _tonAcik = true;
  buildStageToolsRow(_tonSonMode);
}
function tonKapanmayiPlanla(ms) {
  clearTimeout(_tonKapatT);
  // Seçimden HEMEN sonra kapatmıyoruz: yanlış sese düştüğünü fark eden kişi
  // düğmeye yeniden basmak zorunda kalmasın, birkaç saniye düzeltebilsin.
  _tonKapatT = setTimeout(() => { _tonAcik = false; buildStageToolsRow(_tonSonMode); }, ms || 3000);
}
// Sürüklerken YALNIZCA ses adı ve dolgu güncellenir — akorlar yeniden ÇİZİLMEZ.
// Sebep: renderChordPro sonrası çalışan cpFixChordOverlaps her akoru
// getBoundingClientRect ile ölçüyor; 13 adımda 13 ölçüm sahnede takılma yapar.
function tonSliderInput(v) {
  const n = parseInt(v) || 0;
  const kutu = document.getElementById('tonNota');
  if (kutu) kutu.innerHTML = _tonKutuIcerik(n);
  updateTonSliderUI(n);
}
function _tonKutuIcerik(n) {
  const ad = tonSesAdi(_tonKararSesi(), n);
  const fark = n > 0 ? '+' + n : (n < 0 ? String(n) : _sCev('sh.tonOzgun','özgün'));
  return (ad || (n ? fark : _sCev('sh.ton','Ton'))) + '<small>' + fark + '</small>';
}
// Parmak kalkınca uygulanır (change olayı): kaydet, sahneyi tazele, sonra kapan.
function tonSliderCommit(v) {
  const item = _tonAktifItem();
  if (!item) return;
  const id = String(item.workId);
  let n = parseInt(v) || 0;
  n = Math.max(TON_MIN, Math.min(TON_MAX, n));
  if (getTranspose(id) !== n) {
    TRANSPOSE[id] = n;
    renderStage();            // panel de yeniden kurulur; _tonAcik açık kaldığı için kaydırıcı yerinde durur
    savePersonalTranspose(id, n);
  }
  tonKapanmayiPlanla(3000);
}
// Kaydırıcının iki yanındaki tek adım düğmeleri: 13 adım dar bir rayda sığdığı
// için ince ayar parmakla değil dokunarak yapılsın.
function tonNudge(delta) {
  const s = document.getElementById('tonSlider');
  const cur = s ? (parseInt(s.value) || 0) : getTranspose(String((_tonAktifItem()||{}).workId));
  tonSliderCommit(Math.max(TON_MIN, Math.min(TON_MAX, cur + delta)));
}

// personal_chords satırına yaz (eser başına, kullanıcıya özel, cihazlar arası senkron).
// Kayıtlı akor metnine DOKUNULMAZ — sadece transpose alanı güncellenir.
async function savePersonalTranspose(workId, val) {
  try {
    const uid = (typeof getUserId==='function') ? getUserId() : null;
    if (!uid) return;
    const tok = localStorage.getItem('sb_token') || SUPA_KEY;
    await fetch(SUPA_URL+'/rest/v1/personal_chords?on_conflict=user_id,work_id', {
      method:'POST',
      headers:{'apikey':SUPA_KEY,'Authorization':'Bearer '+tok,'Content-Type':'application/json','Prefer':'resolution=merge-duplicates,return=minimal'},
      body: JSON.stringify({ user_id: uid, work_id: parseInt(workId), transpose: val, updated_at: new Date().toISOString() })
    });
  } catch(e) { console.warn('[stage] ton kaydedilemedi:', e.message); }
}

function renderStageChords(text) { return renderChordPro(text); }

function renderChordPro(text) {
  if (!text) return '';
  const esc = s => (s == null ? '' : String(s)).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  return text.split('\n').map(line => {
    // Direktif satırı {comment: ...} / {c: ...} → bölüm etiketi
    const dir = line.match(/^\s*\{\s*(?:c|comment|comment_italic|ci)?\s*:?\s*([^}]*)\}\s*$/i);
    if (dir) { const l = esc((dir[1]||'').trim()); return l ? `<div class="cp-comment">${l}</div>` : ''; }
    if (line.trim() === '') return '<div class="cp-blank"></div>';
    // (2026-08-09) SATIR SONU TEKRAR İŞARETİ — "2X", "3X", "(2X)", "x2".
    // Emir'in gerçek kullanımı bu: satırı zaten okuyorsun, sonuna 2X koyunca
    // "bir kez daha" demiş oluyorsun. Bölüm başlığı DEĞİL, satıra ait bir not;
    // o yüzden satırın UCUNDA küçük bir rozet olarak çiziliyor ve akor
    // hizalamasına karışmıyor (metinden ayrılıp sona ekleniyor).
    let _rep = '';
    const _rm = line.match(/\s*[\(\[]?\s*(?:([0-9]{1,2})\s*[xX]|[xX]\s*([0-9]{1,2}))\s*[\)\]]?\s*$/);
    if (_rm && line.trim().length > (_rm[0].trim().length)) {
      _rep = (_rm[1] || _rm[2]) + 'X';
      line = line.slice(0, line.length - _rm[0].length);
    }
    const _repHtml = _rep ? `<span class="cp-rep">${_rep}</span>` : '';
    // (2026-08-09) ÇIPLAK YAZILMIŞ İŞARETLER de bölüm başlığı sayılır.
    // Kullanıcı `{Nakarat}` yerine sadece "Nakarat" ya da "2X" yazmış olabilir
    // (söz alanında öyle yazıyordu, kopyala-yapıştırla akora da öyle geliyor).
    // Liste bilerek DAR tutuldu: yalnızca akor içermeyen ve tam eşleşen kısa
    // satırlar; bir söz dizesinin yanlışlıkla başlığa dönüşmesini istemiyoruz.
    const _m = line.trim().replace(/[:：]\s*$/, '');
    if (/^(nakarat|bağlantı|baglanti|kıta|kita|ara saz|ara|giriş|giris|coda|final|intro)$/i.test(_m)
        || /^[0-9]{1,2}\s*[xX]$/.test(_m) || /^[xX]\s*[0-9]{1,2}$/.test(_m)) {
      return `<div class="cp-comment">${esc(_m)}</div>`;
    }
    if (line.indexOf('[') === -1) {
      return `<div class="cp-line"><span class="cp-seg"><span class="cp-chord"></span><span class="cp-lyric">${esc(line)}</span></span>${_repHtml}</div>`;
    }
    let html = '<div class="cp-line">';
    const first = line.indexOf('[');
    if (first > 0) html += `<span class="cp-seg"><span class="cp-chord"></span><span class="cp-lyric">${esc(line.slice(0, first))}</span></span>`;
    const re = /\[([^\]]*)\]([^\[]*)/g; let m;
    const scan = line.slice(first);
    while ((m = re.exec(scan)) !== null) {
      const chord = esc(m[1].trim());
      const lyric = esc(m[2]);
      const tail = lyric.trim() === '';
      html += `<span class="cp-seg${tail ? ' cp-tail' : ''}"><span class="cp-chord">${chord}</span><span class="cp-lyric">${lyric === '' ? '&nbsp;' : lyric}</span></span>`;
    }
    html += _repHtml + '</div>';
    return html;
  }).join('');
}

/* ── 2026-07-29 (3): AKOR ÇAKIŞMA KORUYUCUSU ──────────────────────────────────
   .cp-chord width:0 olduğu için akor metni segmentten TAŞAR; tarayıcı bu taşan
   metni layout'ta görmediğinden iki akor görsel olarak üst üste binebiliyor
   ("CmDb", "Bbm"+"Cm"). CSS ile çözülemez: akora genişlik verirsek güfte
   ortadan yarılıyor (eski hata). Çözüm: render'dan sonra akorların GERÇEK metin
   genişliğini Range ile ölçüp çakışanları sağa kaydırmak (transform:translateX).
   transform layout'u değiştirmediği için güfte hiç etkilenmez ve ResizeObserver
   döngüsü oluşmaz. Akor kendi hecesinden en fazla birkaç piksel kayar; kelime
   bütünlüğü korunur. Satır kaydığında (mobilde sarma) üst koordinat değişir,
   o yüzden her görsel satır için sayaç sıfırlanır. */
(function(){
  if (window.__cpOverlapGuard) return; window.__cpOverlapGuard = true;
  var scheduled = false, ro = null, seen = null;
  function textRect(el){
    var r = document.createRange();
    r.selectNodeContents(el);
    var rect = r.getBoundingClientRect();
    if (r.detach) r.detach();
    return rect;
  }
  function fixLine(line){
    if (!line.getClientRects().length) return;   // görünmeyen (display:none) satırı ölçme
    var all = line.querySelectorAll('.cp-chord'), chords = [], i;
    for (i = 0; i < all.length; i++) if (all[i].textContent.trim()) chords.push(all[i]);
    for (i = 0; i < chords.length; i++) chords[i].style.transform = '';
    if (chords.length < 2) return;
    var rects = [];
    for (i = 0; i < chords.length; i++) rects.push(textRect(chords[i]));
    var prevRight = -1e9, prevTop = null, shifts = [], gap, s, r;
    for (i = 0; i < chords.length; i++) {
      r = rects[i];
      if (prevTop === null || Math.abs(r.top - prevTop) > 2) prevRight = -1e9; // yeni görsel satır
      gap = Math.max(4, r.height * 0.35);
      s = prevRight + gap - r.left;
      if (s < 0) s = 0;
      shifts.push(s);
      prevRight = r.left + s + r.width;
      prevTop = r.top;
    }
    for (i = 0; i < chords.length; i++)
      if (shifts[i] > 0.5) chords[i].style.transform = 'translateX(' + shifts[i].toFixed(1) + 'px)';
  }
  function run(){
    scheduled = false;
    var lines = document.querySelectorAll('.cp-line'), i, p;
    if (!lines.length) return;
    if (!ro && window.ResizeObserver && window.WeakSet) { ro = new ResizeObserver(schedule); seen = new WeakSet(); }
    for (i = 0; i < lines.length; i++) {
      fixLine(lines[i]);
      if (ro) { p = lines[i].parentElement; if (p && !seen.has(p)) { seen.add(p); ro.observe(p); } }
    }
  }
  function schedule(){
    if (scheduled) return;
    scheduled = true;
    if (window.requestAnimationFrame) window.requestAnimationFrame(run); else setTimeout(run, 0);
  }
  window.cpFixChordOverlaps = schedule;
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', schedule); else schedule();
  if (window.MutationObserver) {
    new MutationObserver(function(muts){
      for (var i = 0; i < muts.length; i++) if (muts[i].addedNodes && muts[i].addedNodes.length) { schedule(); return; }
    }).observe(document.documentElement, { childList: true, subtree: true });
  }
  window.addEventListener('resize', schedule);
  window.addEventListener('orientationchange', schedule);
  if (document.fonts && document.fonts.ready && document.fonts.ready.then) document.fonts.ready.then(schedule);
})();


let _stageToolsAutoHide = null;
// Telefonda şerit güfteyi kapattığı için kapanır (8sn), masaüstü/tablette yer sorunu
// yok — hiç kapanmaz, kullanıcı ☰'ye ya da dışarı basana kadar açık kalır.
function scheduleStageToolsHide() {
  clearTimeout(_stageToolsAutoHide);
  if (window.matchMedia('(min-width:768px)').matches) return; // geniş ekran: açık kalsın
  _stageToolsAutoHide = setTimeout(() => {
    const panel = document.getElementById('stageToolsPanel');
    if (panel) panel.style.display = 'none';
  }, 8000);
}
function toggleStageTools(e) {
  if (e) e.stopPropagation();
  const panel = document.getElementById('stageToolsPanel');
  const isOpen = panel.style.display === 'flex';
  if (!isOpen) {
    // "Sıradaki" kartıyla çakışmasın diye alt bar'ın (.sb) gerçek yüksekliğine göre konumlan
    const sb = document.querySelector('.sb');
    const sbHeight = sb ? sb.getBoundingClientRect().height : 80;
    panel.style.bottom = (sbHeight + 8) + 'px';
    // Fare/parmak şeridin üzerindeyken kapanmasın; ayrılınca sayaç yeniden başlasın
    if (!panel.dataset.hoverBound) {
      panel.dataset.hoverBound = '1';
      const stay = () => clearTimeout(_stageToolsAutoHide);
      panel.addEventListener('mouseenter', stay);
      panel.addEventListener('touchstart', stay, {passive:true});
      panel.addEventListener('mouseleave', scheduleStageToolsHide);
    }
  }
  panel.style.display = isOpen ? 'none' : 'flex';
  panel.style.flexDirection = 'column';
  clearTimeout(_stageToolsAutoHide);
  if (!isOpen) scheduleStageToolsHide(); // az önce açıldıysa geri sayımı başlat
}
document.addEventListener('click', function(e) {
  const toggle = document.getElementById('stageToolsToggle');
  const panel = document.getElementById('stageToolsPanel');
  if (panel && toggle && !toggle.contains(e.target) && !panel.contains(e.target)) {
    panel.style.display = 'none';
    clearTimeout(_stageToolsAutoHide);
  } else if (panel && panel.contains(e.target) && panel.style.display === 'flex') {
    scheduleStageToolsHide(); // panel içinde bir butona basıldıysa süreyi yenile
  }
});
function toggleStageTheme(){
  const t = localStorage.getItem('stageTheme')||'night';
  const next = t==='night' ? 'day' : 'night';
  localStorage.setItem('stageTheme', next);
  applyStageTheme('stage');
}

function applyStageTheme(screen){
  const t = localStorage.getItem('stageTheme') || 'night';
  const isStageDay   = screen === 'stage' && t === 'day';
  const isStageNight = screen === 'stage' && t === 'night';
  document.body.classList.toggle('day-theme', isStageDay);

  function applyVars(){
    const el = document.documentElement;
    if(screen === 'stage') el.removeAttribute('data-theme');
    if(isStageNight){
      el.style.setProperty('--bg',      '#080810');
      el.style.setProperty('--surface', '#0f0f1a');
      el.style.setProperty('--surface2','#161625');
      el.style.setProperty('--border',  '#484860');
      el.style.setProperty('--text',    '#f1f0ff');
      el.style.setProperty('--text2',   '#8b8aa8');
      el.style.setProperty('--text3',   '#3d3d58');
    } else if(isStageDay){
      el.style.setProperty('--bg',      '#f5f4f0');
      el.style.setProperty('--surface', '#fff');
      el.style.setProperty('--surface2','#f0eeea');
      el.style.setProperty('--border',  '#d8d4cc');
      el.style.setProperty('--text',    '#1a1825');
      el.style.setProperty('--text2',   '#5a5670');
      el.style.setProperty('--text3',   '#9d9aae');
    }
  }
  applyVars();
  setTimeout(applyVars, 100);
  setTimeout(applyVars, 500);

  const btn = document.getElementById('stageThemeBtn2');
  if(btn){
    const icon = btn.querySelector('i');
    if(icon) icon.className = t === 'day' ? 'ti ti-moon' : 'ti ti-sun';
    btn.classList.toggle('active', t === 'day');
  }
}
function setTheme(t){
  localStorage.setItem('stageTheme',t);
  const active={background:'rgba(255,200,61,0.12)',borderColor:'rgba(255,200,61,0.4)',color:'#E5A900'};
  const inactive={background:'',borderColor:'rgba(148,148,168,0.18)',color:'#8b8aa8'};
  ['day','night'].forEach(k=>{
    const el=document.getElementById('tc-'+k); if(!el)return;
    const s=k===t?active:inactive;
    el.style.background=s.background; el.style.borderColor=s.borderColor; el.style.color=s.color;
  });
}
function startStage(){
  curRep=reps.find(r=>r.id===selId);
  if(!curRep||(curRep.items||[]).length===0)return;
  curIdx=0;
  if(!localStorage.getItem('stageTheme')) localStorage.setItem('stageTheme','night');
  window._stageActive = true;
  window.dispatchEvent(new Event('stageEnter'));
  applyStageTheme('stage');
  showScreen('stageScreen');
  document.getElementById('strn').textContent=curRep.name;
  // Avatar doldur
  if(typeof getUser==='function'){const u=getUser();if(u){const name=u?.user_metadata?.full_name||u?.email?.split('@')[0]||'—';const av=document.getElementById('stnAvatar');if(av)av.textContent=name.charAt(0).toUpperCase();}}
  renderStage();
}

function renderStage(){
  const items=curRep.items||[];
  const item=items[curIdx];
  if(!item)return;
  const w=WL[item.workId]||{};
  _stageShowsPlaceholder = !w.name; // gerçek ad yoksa placeholder/… bastık demektir
  const total=items.length;
  document.getElementById('stc').textContent=(curIdx+1)+'/'+total;
  const pds=document.getElementById('pds');
  if(total<=20){pds.innerHTML=items.map((_,i)=>`<div class="pd ${i<curIdx?'done':i===curIdx?'cur':''}"></div>`).join('');}
  // (2026-08-06) 20'den uzun repertuvarda nokta çizmek okunmuyordu ve alan
  // yetmiyordu; eskiden hiçbir şey gösterilmiyordu (Emir "noktalar görünmüyor"
  // dedi). Artık ince bir ilerleme çubuğu var — nerede olduğun yine belli.
  else pds.innerHTML=`<div class="pbar"><span style="width:${total?Math.round(((curIdx+1)/total)*100):0}%"></span></div>`;
  // Info paneli güncelle
  const panel = document.getElementById('stageInfoPanel');
  if (panel) {
    const rows = [
      // (2026-08-23) KADRO en uste yakin: sahnede "bu eserde kim caliyor"
      // sorusu esere girerken sorulur, teknik ayrintilardan once gelir.
      item.performer ? `<div class="sip-row"><span class="sip-label">${_sCev('sh.kadro','Kadro')}</span><span class="sip-val">${item.performer}</span></div>` : '',
      w.makam ? `<div class="sip-row"><span class="sip-label">${_sCev('alan.makam','Makam')}</span><span class="sip-val">${w.makam}</span></div>` : '',
      (item.closingNote||w.closingNote) ? `<div class="sip-row"><span class="sip-label">${_sCev('sh.kapanis','Kapanış')}</span><span class="sip-val">${item.closingNote||w.closingNote}</span></div>` : '',
      w.tuning ? `<div class="sip-row"><span class="sip-label">${_sCev('alan.akort','Akort')}</span><span class="sip-val">${w.tuning}</span></div>` : '',
      w.form ? `<div class="sip-row"><span class="sip-label">${_sCev('es.form','Form')}</span><span class="sip-val">${w.form}</span></div>` : '',
      // (2026-08-30) `measurement` ÖLÇÜ tutuyor (4/4, 9/8), usul değil.
      // Usul ayrı sütunda (`ritim`) ve o da burada gösteriliyor.
      w.measurement ? `<div class="sip-row"><span class="sip-label">${_sCev('alan.olcu','Ölçü')}</span><span class="sip-val">${w.measurement}</span></div>` : '',
      w.ritim ? `<div class="sip-row"><span class="sip-label">${_sCev('alan.usul','Usul')}</span><span class="sip-val">${w.ritim}</span></div>` : '',
      w.region ? `<div class="sip-row"><span class="sip-label">${_sCev('sh.bolge','Bölge')}</span><span class="sip-val">${w.region}</span></div>` : '',
      w.composer ? `<div class="sip-row"><span class="sip-label">${_sCev('es.bestecialan','Besteci')}</span><span class="sip-val">${w.composer}</span></div>` : '',
      w.lyricWriter ? `<div class="sip-row"><span class="sip-label">${_sCev('es.sozyazari','Söz Yazarı')}</span><span class="sip-val">${w.lyricWriter}</span></div>` : '',
      w.instrument ? `<div class="sip-row"><span class="sip-label">${_sCev('alan.enstruman','Enstrüman')}</span><span class="sip-val">${w.instrument}</span></div>` : '',
      item.note ? `<div class="sip-row"><span class="sip-label">${_sCev('sh.not','Not')}</span><span class="sip-val">${item.note}</span></div>` : '',
    ].filter(Boolean).join('');
    panel.innerHTML = rows || '<div style="color:var(--text3);font-size:12px;">' + _sCev('sh.bilgiYok','Bilgi yok') + '</div>';
    const infoBtn = document.querySelector('.stage-info-btn');
    if (infoBtn) infoBtn.style.display = rows ? 'flex' : 'none';
  }
  const viewMode = getStageViewMode(w);
  let bodyHtml = '';
  if (viewMode === 'nota' && stageNotaPages(w).length) {
    // Sayfa indeksi eser değişince sıfırlanır (aynı esere dönünce de baştan başlar)
    const _nk = String(item.workId);
    const _np2 = stageNotaPages(w);
    if (_notaWorkKey !== _nk) {
      _notaWorkKey = _nk;
      // Geriye gidiliyorsa önceki eserin SON sayfasında açılır (doğal akış)
      _notaPage = _notaEnterFromEnd ? Math.max(0, _np2.length - 1) : 0;
    }
    _notaEnterFromEnd = false;
    if (_notaPage > _np2.length - 1) _notaPage = _np2.length - 1;
    if (_notaPage < 0) _notaPage = 0;
    bodyHtml = notaViewHtml(_np2, _notaPage);
  } else if (viewMode === 'chords' && w.chords) {
    // (2026-08-06) Ton kaydırma HARF üzerinde yapılır (motor harf bekliyor);
    // kullanıcının yazım tercihi ancak ondan SONRA, yalnızca gösterim için
    // uygulanır. Kayıtlı akor metni asla solfeje çevrilip saklanmaz.
    const _akorHarf = transposeChordPro(w.chords, getTranspose(item.workId));
    const _akorGoster = (typeof akorGoster === 'function') ? akorGoster(_akorHarf) : _akorHarf;
    bodyHtml = `<div class="wlyrics">${renderStageChords(_akorGoster)}</div>`;
  } else {
    bodyHtml = w.lyrics ? `<div class="wlyrics">${w.lyrics.replace(/\n/g,'<br>')}</div>` : '';
  }
  const _cn = item.closingNote || w.closingNote || '';
  const _kt = getTranspose(item.workId);
  const _kl = kararLabel(_cn, _kt);
  const kararChip = _cn
    ? `<div class="wkarar${_kt ? ' shifted' : ''}" title="${_kt && kararLabel(_cn,0) ? _sCev('sh.orijinalKarar','Orijinal karar: {n}').replace('{n}', kararLabel(_cn,0)) : ''}">${_sCev('sh.kararKisa','Karar')}: ${_kl || _cn}${(!_kl && _kt) ? _sCev('es.kaydirilmadi',' (kaydırılmadı)') : ''}</div>`
    : '';
  const _head = document.getElementById('smHead');
  if (_head) _head.innerHTML = `
    <div class="wnum"></div>
    <div class="wtitle">${w.name || (WL_loaded ? item.workId : '…')}</div>
    ${kararChip}
    ${knotSahneHtml(item.workId)}`;
  // 2026-07-28: ÖLÇEK ÖNCE, İÇERİK SONRA, HİZA AYNI KAREDE.
  // Eskiden içerik basılıyor, hizalama requestAnimationFrame ile BİR SONRAKİ
  // karede uygulanıyordu. İlk kare ortalanmış+eski ölçekte boyanıyor, sonraki
  // karede sola yaslı+yeni ölçekte yeniden akıyordu; .wlyrics'in opacity
  // animasyonu katmanı compositor'a taşıdığı için iOS Safari bu yeniden akışı
  // kısmen boyayıp üstteki satırları eski halinde bırakıyordu → güfte üst üste
  // binmiş görünüyordu (yenileyince geçiyordu). Artık üçü de tek karede.
  const savedScale = parseFloat(localStorage.getItem('stageLyricsScale')) || 1;
  document.documentElement.style.setProperty('--lyrics-scale', savedScale);
  document.getElementById('sm').innerHTML = bodyHtml;
  const savedAlign = localStorage.getItem('stageLyricsAlign') || 'left';
  setLyricsAlign(savedAlign);
  updateFontSliderUI(savedScale);
  fitLyrics();   // (2026-09-05) eser başına sığdırma — hiza/ölçek ile aynı karede
  if (viewMode === 'nota') notaPreloadNext(stageNotaPages(w), _notaPage);
  updateViewToggleUI(w);
  // ── POTPURİ: zincir rozeti + "Sıradaki" kartının potpuri hali ──
  const ch = stageChainInfo(items, curIdx);
  const mb = document.getElementById('medleyBadge');
  if (mb) {
    if (ch.inChain) { mb.textContent = '🔗 Potpuri ' + ch.pos + '/' + ch.len; mb.style.display = 'flex'; }
    else mb.style.display = 'none';
  }
  const next=items[curIdx+1];
  const np=document.getElementById('np');
  if(next){
    const nw=WL[next.workId]||{};
    document.getElementById('nn').textContent=nw.name || (WL_loaded ? next.workId : '…');
    // Üst satır: makam ve usul. Alt satır: karar sesi (varsa) — kartın
    // yüksekliği bu iki satır kadar, ad ne kadar uzun olursa olsun.
    // Makam · usul · karar sesi — etiketsiz, aralarında ince dikey çizgi.
    const _bilgi = [nw.makam, nw.measurement, next.closingNote || nw.closingNote]
      .filter(Boolean)
      .map(v => `<span class="nmv">${String(v).replace(/</g,'&lt;')}</span>`)
      .join('<i class="nmx" aria-hidden="true"></i>');
    document.getElementById('npSide').innerHTML = _bilgi;
    // Sonraki eser bu esere BAĞLIYSA kart potpuri görünümüne geçer (ara vermeden devam)
    const linkedNext = !!next.linked_prev;
    np.classList.toggle('medley', linkedNext);
    const nl = np.querySelector('.nl');
    if (nl) nl.textContent = linkedNext ? _sCev('sh.potpuriDevam','🔗 POTPURİ — DEVAMI') : _sCev('sh.siradaki','Sıradaki');
    np.style.display='flex';   // (2026-08-06) 'block' CSS'teki yatay dizilimi eziyordu
  }
  else np.style.display='none';
}

// ── POTPURİ yardımcısı ──
// items[idx] hangi zincirde? {inChain, pos (1-tabanlı), len, nextLinked}
// Zincir = linked_prev=true olan ARDIŞIK satırlar; ilk satırda bayrak yok sayılır.
function stageChainInfo(items, idx){
  const lp = i => i > 0 && !!(items[i] && items[i].linked_prev);
  let a = idx, b = idx;
  while (a > 0 && lp(a)) a--;
  while (b + 1 < items.length && lp(b+1)) b++;
  const len = b - a + 1;
  return { inChain: len > 1, pos: idx - a + 1, len, nextLinked: lp(idx+1) };
}

// ── 2026-07-20: ÇOK SAYFALI NOTA — sayfa gezinmesi ────────────────────────
// Nota görünümündeyken ileri/geri ÖNCE sayfa çevirir; son sayfadan sonra bir
// SONRAKİ ESERE geçer (ilk sayfadan geriye giderken önceki esere). Swipe,
// klavye/pedal ve yan oklar aynı yoldan geçer — davranış her yerde aynı.
let _notaPage = 0, _notaWorkKey = null, _notaEnterFromEnd = false;

function stageNotaPages(w) {
  if (!w) return [];
  const p = Array.isArray(w.notaPages) ? w.notaPages.filter(Boolean) : [];
  if (p.length) return p;
  return w.notaUrl ? [w.notaUrl] : [];
}
function isStageNotaImage(u){ return /\.(jpe?g|png|gif|webp|heic|tiff?)(\?|$)/i.test(u||''); }

// Şu an nota görünümünde miyiz? (öyleyse aktif eserin sayfa listesini döner)
function currentNotaPages() {
  const item = curRep && curRep.items ? curRep.items[curIdx] : null;
  if (!item) return [];
  const w = WL[String(item.workId)] || {};
  if (getStageViewMode(w) !== 'nota') return [];
  return stageNotaPages(w);
}

function notaViewHtml(pages, i) {
  const u = pages[i];
  const body = isStageNotaImage(u)
    ? `<img id="notaImg" src="${u}" alt="Nota sayfa ${i+1}">`
    : `<div class="nota-pdf">📄 PDF nota — sayfa geçişi için sayfaları ayrı görsel olarak yükle.<br>
         <a href="${u}" target="_blank" style="color:var(--accent);">↗ Aç</a></div>`;
  const counter = pages.length > 1 ? `<div class="nota-count" id="notaCount">${i+1} / ${pages.length}</div>` : '';
  const pager = pages.length > 1 ? `
    <div class="nota-pager" id="notaPager">
      <button onclick="event.stopPropagation();notaGoPage(${i-1})" ${i===0?'disabled':''} aria-label="${_sCev('sh.oncekiSayfa','Önceki sayfa')}">‹</button>
      <div class="nota-dots">${pages.map((_,k)=>`<button class="nota-dot${k===i?' cur':''}" onclick="event.stopPropagation();notaGoPage(${k})" aria-label="Sayfa ${k+1}"></button>`).join('')}</div>
      <button onclick="event.stopPropagation();notaGoPage(${i+1})" ${i===pages.length-1?'disabled':''} aria-label="${_sCev('sh.sonrakiSayfa','Sonraki sayfa')}">›</button>
    </div>` : '';
  return counter + `<div class="wnota">${body}${pager}</div>`;
}

// Sonraki sayfayı önden yükle — sahnede sayfa çevirince bekleme olmasın
function notaPreloadNext(pages, i) {
  const nxt = pages[i+1];
  if (nxt && isStageNotaImage(nxt)) { const im = new Image(); im.src = nxt; }
}

// Sayfaya git (pager/dot). Aralık dışına taşarsa eser değiştirir.
function notaGoPage(i) {
  const pages = currentNotaPages();
  if (!pages.length) return;
  if (i < 0) { sideNavPrev(); return; }
  if (i > pages.length - 1) { sideNavNext(); return; }
  _notaPage = i;
  const sm = document.getElementById('sm');
  if (!sm) return;
  sm.innerHTML = notaViewHtml(pages, i);
  notaPreloadNext(pages, i);
}

// true dönerse "sayfa çevrildi, eser değiştirme"
function notaStepPage(dir) {
  const pages = currentNotaPages();
  if (pages.length < 2) return false;
  const t = _notaPage + dir;
  if (t < 0 || t > pages.length - 1) return false;   // sınırda → eser değişsin
  notaGoPage(t);
  return true;
}

function nextWork(){
  if (notaStepPage(1)) return;   // önce nota sayfası
  sideNavNext();
}

function prevWork(){
  if (notaStepPage(-1)) return;
  _notaEnterFromEnd = currentNotaPages().length > 0;   // önceki eserin son sayfasında aç
  sideNavPrev();
}


function initBackBtn() {
  const src = localStorage.getItem('stageSource');
  const backBtn = document.getElementById('btnGoBack');
  if (backBtn && src) {
    const labels = { eserler: _sCev('sh.navEserler','Eserler'), repertoires: _sCev('sh.navRepertuvarlar','Repertuvarlar'), index: _sCev('sh.anaSayfa','Ana Sayfa'), artiesten: _sCev('sh.navSolistler','Solistler'), uyeler: _sCev('sh.navUyeler','Üyeler'), ayarlar: _sCev('sh.navAyarlar','Ayarlar') };
    const lbl = backBtn.querySelector('.v2-bn-label');
    if (lbl) lbl.textContent = labels[src] || _sCev('sh.geriDon','Geri Dön');
  }
  // Not: görünüm etiketi artık her renderStage() çağrısında updateViewToggleUI() ile güncelleniyor
}

// ── Görünüm modu: Söz / Akor / Nota — segmented control ile, repertuvar bazında hatırlanır ──
// Not: eser (work) bazında ayrı bir "varsayılan görünüm" alanı henüz veritabanında yok;
// o katman eklenmek istenirse work_parts/works şemasına bir alan gerekir.
function viewModeStorageKey(){
  const repId = curRep && curRep.id ? curRep.id : 'default';
  return 'stageViewMode_' + repId;
}
function getStageViewMode(w) {
  let mode = localStorage.getItem(viewModeStorageKey()) || 'lyrics';
  // Eserde o modun verisi yoksa güvenli şekilde söze düş
  if (mode === 'chords' && !w.chords) mode = 'lyrics';
  if (mode === 'nota' && !stageNotaPages(w).length) mode = 'lyrics';
  return mode;
}

function setViewMode(mode) {
  const item = curRep && curRep.items ? curRep.items[curIdx] : null;
  const w = item ? (WL[item.workId] || {}) : null;
  if (!w) return;
  if (mode === 'chords' && !w.chords) return;
  if (mode === 'nota' && !stageNotaPages(w).length) return;
  localStorage.setItem(viewModeStorageKey(), mode);
  renderStage();
}

// 2026-07-19: açılır menü kaldırıldı (sekme stili). Bu iki fonksiyon yalnızca
// geriye dönük uyumluluk için boş stub olarak duruyor — eski bir çağrı kalırsa patlamasın.
function toggleViewModeMenu(e) { if (e && e.stopPropagation) e.stopPropagation(); }
function closeViewModeMenu() {}

function updateViewToggleUI(w) {
  const tabs = document.getElementById('viewModeTabs');
  if (!tabs) return;
  const mode = getStageViewMode(w);
  const available = { lyrics: true, chords: !!w.chords, nota: stageNotaPages(w).length > 0 };
  tabs.querySelectorAll('.vm-tab').forEach(t => {
    const m = t.dataset.mode;
    const on = (m === mode);
    t.classList.toggle('active', on);
    t.disabled = !available[m];
    t.setAttribute('aria-selected', on ? 'true' : 'false');
  });
  // Şerit HER ZAMAN görünür kalır (yalnızca güftesi olan eserlerde de) —
  // eskiden tek-mod olunca gizleniyordu, "seçici kayıp" görünmesinin sebebi buydu.
  // Veri yoksa Akor/Nota sekmesi pasif görünür ama şerit yerinde durur.
  tabs.style.display = 'flex';
  buildStageToolsRow(mode);
}

// Alt "Görünüm Ayarları" paneli, o an açık olan görünüme göre yeniden kurulur.
// Not: Akor modunda ton değiştirme (± Ton) ve Nota modunda sayfaya/genişliğe sığdırma
// henüz ayrı bir özellik olarak yok — bunlar ileride eklenebilir.
function buildStageToolsRow(mode) {
  const row = document.getElementById('stageToolsRow');
  if (!row) return;
  // (2026-08-13) Ton kaydırıcısı açıkken panel yeniden kurulabilir (renderStage);
  // hangi görünümde olduğumuzu saklıyoruz ki kapanma sayacı doğru yeniden kursun.
  // Esere geçilirse kaydırıcı kapanır — bir sonraki eserde açık gelmesi şaşırtır.
  _tonSonMode = mode;
  const _tonItem = (curRep && (curRep.items||[])[curIdx]) || null;
  const _tonWid = _tonItem ? String(_tonItem.workId) : '';
  if (_tonAcik && _tonAcikWid !== _tonWid) { _tonAcik = false; clearTimeout(_tonKapatT); }
  _tonAcikWid = _tonWid;
  const themeBtn = `<button onclick="event.stopPropagation();toggleStageTheme()" id="stageThemeBtn2" title="${_sCev('sh.geceGunduz','Gece/Gündüz')}" class="align-btn"><i class="ti ti-sun"></i></button>`;
  // (2026-08-13) ☰ (openStageNav) DÜĞMESİ KALDIRILDI — sahneden çıkmak iki
  // dokunuş istiyordu ve ikon ne yaptığını anlatmıyordu (Emir bildirdi:
  // "bilmeyen için muamma"). Eylemler artık YAZIYLA, doğrudan panelde.
  // openStageNav / #v2StageBotNav dosyada duruyor (Escape yolu ve :818'deki
  // gizli yedek düğme için) — sadece panelden çağrılmıyor.
  const sahneBtns = `
      <a href="#" onclick="event.stopPropagation();goBack(event)" class="st-act" title="${_sCev('sh.geldiginSayfa','Geldiğin sayfaya dön')}"><i class="ti ti-arrow-left"></i>${_sCev('sh.geriDon','Geri Dön')}</a>
      <a href="index.html" onclick="event.stopPropagation()" class="st-act" title="${_sCev('sh.anaSayfa','Ana Sayfa')}"><i class="ti ti-home"></i>${_sCev('sh.anaSayfa','Ana Sayfa')}</a>
      <button onclick="event.stopPropagation();exitStage(event)" class="st-act st-act-exit" title="${_sCev('sh.sahneModundanCik','Sahne modundan çık')}"><i class="ti ti-x"></i>${_sCev('sh.sahnedenCik','Sahneden Çık')}</button>`;
  // Akor modunda ton kaydırma (± yarım ton) — eser başına saklanır
  const item = (curRep && (curRep.items||[])[curIdx]) || null;
  const tVal = item ? getTranspose(item.workId) : 0;
  // ± Ton, eserde AKOR VARSA görünür (eskiden yalnızca Akor görünümündeyken
  // gelirdi; Söz görünümüne geçilince "motor kayboldu" sanılıyordu).
  const _hasChords = !!(item && (WL[String(item.workId)]||{}).chords);
  // (2026-08-13) Ton kontrolü artık RAKAM değil SES ADI üzerinden.
  // Kapalı hâl: tek düğme, üstünde o an çalınan karar sesi ("La" / "A").
  // Açık hâl: ◀ kaydırıcı ▶ + canlı ses adı kutusu; seçimden birkaç saniye
  // sonra kendiliğinden kapanır (tonKapanmayiPlanla).
  // Karar sesi yoksa veya tanınmıyorsa (koma sesleri 12'liye oturmaz) ad
  // üretilemez → eski ± adımlayıcı gösterilir, özellik kaybolmaz.
  const _cnTon = (item && (item.closingNote || (WL[String(item.workId)]||{}).closingNote)) || '';
  const _sesVar = tonSesAdi(_cnTon, 0) !== null;
  let tonBtns = '';
  if (_hasChords && mode !== 'nota') {
    if (!_sesVar) {
      tonBtns = `
      <button onclick="event.stopPropagation();stepTranspose(-1)" title="${_sCev('sh.yarimTonPes','Yarım ton pes')}" class="align-btn"><i class="ti ti-minus"></i></button>
      <button onclick="event.stopPropagation();resetTranspose()" id="tonBadge" title="${_sCev('sh.tonuSifirla','Tonu sıfırla')}" class="align-btn" style="min-width:44px;font-size:12px;font-weight:800;${tVal?'color:var(--accent);border-color:var(--accent);':''}">${tVal>0?'+'+tVal:(tVal||'Ton')}</button>
      <button onclick="event.stopPropagation();stepTranspose(1)" title="${_sCev('sh.yarimTonTiz','Yarım ton tiz')}" class="align-btn"><i class="ti ti-plus"></i></button>
      ${_cnTon ? `<span class="ton-karar" style="font-size:11px;white-space:nowrap;padding:0 6px;color:var(--text3, #6b7482);">${_cnTon}</span>` : ''}`;
    } else if (!_tonAcik) {
      const _ad = tonSesAdi(_cnTon, tVal);
      const _org = tonSesAdi(_cnTon, 0);
      tonBtns = `
      <button onclick="tonKaydiriciAc(event)" id="tonBtn" class="ton-btn${tVal?' shifted':''}"
        title="${tVal ? (_sCev('sh.ozgunKarar','Özgün karar: {n} — değiştirmek için dokun').replace('{n}', _org)) : _sCev('sh.tonuDegistir','Tonu değiştir')}">
        <i class="ti ti-music"></i>${_ad}${tVal ? `<span style="font-size:10px;font-weight:700;opacity:.75;">${tVal>0?'+'+tVal:tVal}</span>` : ''}
      </button>`;
    } else {
      tonBtns = `
      <div class="ton-slider-wrap" onclick="event.stopPropagation()">
        <button onclick="event.stopPropagation();tonNudge(-1)" class="ton-step" title="${_sCev('sh.yarimTonPes','Yarım ton pes')}"><i class="ti ti-minus"></i></button>
        <input type="range" id="tonSlider" class="ton-slider" min="${TON_MIN}" max="${TON_MAX}" step="1" value="${tVal}"
          onclick="event.stopPropagation()" oninput="tonSliderInput(this.value)" onchange="tonSliderCommit(this.value)">
        <button onclick="event.stopPropagation();tonNudge(1)" class="ton-step" title="${_sCev('sh.yarimTonTiz','Yarım ton tiz')}"><i class="ti ti-plus"></i></button>
        <span class="ton-nota" id="tonNota">${_tonKutuIcerik(tVal)}</span>
      </div>`;
    }
  }
  // Akor yazımı: A B C / Do Re Mi. Yalnızca AKOR görünümünde gösterilir —
  // başka görünümde etkisi olmadığı için orada durması kafa karıştırırdı.
  // Tercih auth.js'teki ortak anahtarda (kullanıcı bazlı); eser düzenleme
  // ekranındaki radyoyla AYNI ayardır.
  const _yazim = (typeof getAkorYazim === 'function') ? getAkorYazim() : 'abc';
  const yazimBtns = (mode === 'chords') ? `
      <button onclick="event.stopPropagation();setAkorYazimi('abc')" title="${_sCev('sh.akorABC','Akorları A B C yaz')}" class="align-btn${_yazim==='abc'?' active':''}" style="width:auto;padding:0 10px;font-size:12px;font-weight:800;">ABC</button>
      <button onclick="event.stopPropagation();setAkorYazimi('solfej')" title="${_sCev('sh.akorSolfej','Akorları Do Re Mi yaz')}" class="align-btn${_yazim==='solfej'?' active':''}" style="width:auto;padding:0 10px;font-size:12px;font-weight:800;">Do Re Mi</button>` : '';

  // Başlıklı blok; içi boşsa hiç çizilmez (ör. akoru olmayan eserde Ton bloğu).
  // (2026-08-13) Üçüncü parametre: blok DİKEY dizilsin mi (Sahne bloğu gibi
  // yazılı eylem satırları için; ikon düğmeleri yatay kalıyor).
  const grup = (baslik, icerik, dikey) => icerik
    ? `<div class="st-grp"><div class="st-grp-lbl">${baslik}</div><div class="st-grp-row${dikey ? ' st-grp-col' : ''}">${icerik}</div></div>`
    : '';

  // Yazı boyutu: tek kaydırıcı. Panel her açılışta yeniden kurulduğu için
  // değer kayıtlı ölçekten okunuyor (setLyricsFontScale zaten saklıyor).
  const _olcek = parseFloat(localStorage.getItem('stageLyricsScale') || '1') || 1;
  const fontBlok = `
      <div class="font-slider-wrap" title="${_sCev('sh.yaziBoyutu','Yazı Boyutu')}">
        <span class="fs-a-sm">A</span>
        <input type="range" id="lyricsFontSlider" class="font-slider" min="0.75" max="1.6" step="0.05" value="${_olcek}"
          onclick="event.stopPropagation()" oninput="setLyricsFontScale(this.value)">
        <span class="fs-a-lg">A</span>
      </div>`;

  if (mode === 'nota') {
    row.innerHTML = grup(_sCev('sh.gorunum','Görünüm'), themeBtn) + grup(_sCev('sh.grupSahne','Sahne'), sahneBtns, true);
  } else {
    // lyrics ve chords aynı .wlyrics kutusunu kullandığı için hizalama ikisinde de geçerli
    const alignBtns = `
      <button onclick="event.stopPropagation();setLyricsAlign('left')" id="alignLeft" title="${_sCev('sh.solaYasla','Sola Yasla')}" class="align-btn"><i class="ti ti-align-left"></i></button>
      <button onclick="event.stopPropagation();setLyricsAlign('center')" id="alignCenter" title="${_sCev('sh.ortala','Ortala')}" class="align-btn"><i class="ti ti-align-center"></i></button>
      <button onclick="event.stopPropagation();setLyricsAlign('right')" id="alignRight" title="${_sCev('sh.sagaYasla','Sağa Yasla')}" class="align-btn"><i class="ti ti-align-right"></i></button>`;
    // (2026-08-21) Kişisel not aç/kapa — YALNIZCA o eserde not varsa çizilir.
    // Notu olmayan eserde düğme göstermek "neyi kapatıyorum?" sorusu doğurur.
    const _knotVar = !!(item && PERSONAL_NOTES[String(item.workId)]);
    const knotBtn = _knotVar ? `
      <button onclick="knotGosterToggle(event)" title="${_sCev('sh.knotToggleT','Kişisel notu göster/gizle')}" class="align-btn${KNOT_GOSTER?' active':''}" style="width:auto;padding:0 10px;font-size:12px;font-weight:700;"><i class="ti ti-lock"></i> ${KNOT_GOSTER?_sCev('sh.acik','Açık'):_sCev('sh.kapali','Kapalı')}</button>` : '';
    row.innerHTML = grup(_sCev('sh.hizalama','Hizalama'), alignBtns)
                  + grup(_sCev('sh.yaziBoyutu','Yazı Boyutu'), fontBlok)
                  + grup(_sCev('sh.ton','Ton'), tonBtns)
                  + grup(_sCev('sh.akorYazimi','Akor Yazımı'), yazimBtns)
                  + grup(_sCev('sh.kisiselNot','Kişisel Not'), knotBtn)
                  + grup(_sCev('sh.gorunum','Görünüm'), themeBtn)
                  + grup(_sCev('sh.grupSahne','Sahne'), sahneBtns, true);
    // Panel her yeniden kurulduğunda kaydırıcının dolgu rengi ve hiza
    // düğmelerinin aktif hâli sıfırlanır — kayıtlı değerlerden geri yazılır.
    updateFontSliderUI(_olcek);
    if (_tonAcik) updateTonSliderUI(tVal);   // ray dolgusu da her kurulumda geri yazılır
    const _hiza = localStorage.getItem('stageLyricsAlign') || 'left';
    ['left','center','right'].forEach(a => {
      const b = document.getElementById('align' + a.charAt(0).toUpperCase() + a.slice(1));
      if (b) b.classList.toggle('active', a === _hiza);
    });
  }
}

// Akor yazımını değiştir ve sahneyi yeniden çiz (gösterim değişikliği; veri aynı).
// ── "LİSTE DEĞİŞTİ" ŞERİDİ (2026-08-06) ──────────────────────────────
// Sahnede veri KENDİLİĞİNDEN değişmez: konser sırasında listenin altından
// kayması kötü sürpriz olur. Canlı güncelleme geldiğinde yalnızca haber
// veriyoruz; tazeleme kararı icracıda.
function showStageChangeBar() {
  if (document.getElementById('stChangeBar')) return;
  const bar = document.createElement('button');
  bar.id = 'stChangeBar';
  bar.type = 'button';
  bar.onclick = async function () {
    bar.disabled = true;
    bar.textContent = 'Yenileniyor...';
    try { if (typeof syncOfflineData === 'function') await syncOfflineData(); } catch (e) {}
    bar.remove();
    try { renderStage(); } catch (e) { location.reload(); }
  };
  bar.textContent = _sCev('sh.repGuncellendi','Repertuvar güncellendi — yenilemek için dokun');
  bar.style.cssText =
    'position:fixed;left:50%;transform:translateX(-50%);top:calc(8px + env(safe-area-inset-top));' +
    'z-index:9999;background:var(--accent);color:#1a1200;border:none;border-radius:20px;' +
    'padding:8px 16px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;' +
    'box-shadow:0 6px 20px rgba(0,0,0,.45);max-width:calc(100vw - 24px);';
  document.body.appendChild(bar);
}

window.addEventListener('remote-change', function (e) {
  // applied=true ise db.js zaten çekti (sahne dışı sayfalar) — şerit gerekmez.
  if (e.detail && e.detail.applied) return;
  showStageChangeBar();
});

function setAkorYazimi(yon) {
  if (typeof setAkorYazim !== 'function') return;
  setAkorYazim(yon);
  renderStage();
}

function goBack(e) {
  if (e) e.preventDefault();
  const src = localStorage.getItem('stageSource');
  if (src === 'eserler') window.location.href = 'eserler.html';
  else if (src === 'repertoires') window.location.href = 'repertoires.html';
  else if (src === 'index') window.location.href = 'index.html';
  else window.location.href = 'index.html';
}

function openInfoSheet(){
  const sheet = document.getElementById('infoSheet');
  const backdrop = document.getElementById('infoSheetBackdrop');
  if (sheet) sheet.classList.add('open');
  if (backdrop) backdrop.classList.add('open');
}
function closeInfoSheet(){
  const sheet = document.getElementById('infoSheet');
  const backdrop = document.getElementById('infoSheetBackdrop');
  if (sheet) sheet.classList.remove('open');
  if (backdrop) backdrop.classList.remove('open');
}

// (2026-08-06) ONAY PENCERESİ KALDIRILDI. "Sahne modundan çıkmak istiyor
// musunuz?" fazladan bir adımdı; çıkmak yıkıcı bir işlem değil, tek dokunuşla
// sahneye geri dönülüyor. Onay yalnızca geri alınamayan işlerde kalmalı
// (ör. repertuvar silme, :1065).
function exitStage(e){
  if (e) e.stopPropagation();
  window._stageActive=false;
  window.dispatchEvent(new Event('stageExit'));
  applyStageTheme('picker');
  backToPicker();
}
function showEndScreen(){
  applyStageTheme('picker');
  showScreen('endScreen');
  document.getElementById('ern').textContent = curRep.name || '';
  document.getElementById('erc').textContent =
    _sCev('sh.eserSeslendirdiniz','{n} eser seslendirdiniz').replace('{n}', (curRep.items||[]).length);
  // Paylaşım modunda Ana Sayfa ve Repertuvar Seç butonlarını gizle
  const isShared = !!new URLSearchParams(window.location.search).get('share');
  const btnRep = document.getElementById('btnRepertuvarSec');
  const btnAna = document.getElementById('btnAnaSayfa');
  if(btnRep) btnRep.style.display = isShared ? 'none' : '';
  if(btnAna) btnAna.style.display = isShared ? 'none' : '';
}
function restartStage(){curIdx=0;showScreen('stageScreen');renderStage();}
function backToPicker(){
  // Paylaşım modunda: sadece paylaşılan repertuvarı göster
  const shareToken = new URLSearchParams(window.location.search).get('share');
  if (shareToken && curRep && curRep.id !== 'single') {
    // Paylaşılan repertuvarı picker'da göster
    showScreen('pickerScreen');
    const pi = document.getElementById('pi');
    if (pi) {
      pi.innerHTML = `
        <div class="plogo"><img src="logo_dark.png" alt="repertuvar.app" data-logo="true" style="width:180px;display:block;"></div>
        <h1 class="ptitle">Paylaşılan Repertuvar</h1>
        <div style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px;cursor:pointer;margin-top:16px;"
          onclick="startSharedRep()">
          <div style="font-size:15px;font-weight:600;color:var(--text);">${curRep.name||_sCev('sh.adsizRep','Repertuvar')}</div>
          <div style="font-size:12px;color:var(--text2);margin-top:4px;">${(curRep.items||[]).length} eser</div>
        </div>`;
    }
    return;
  }
  selId=null;document.getElementById('bstart').disabled=true;showScreen('pickerScreen');renderPicker();
}

function startSharedRep() {
  curIdx = 0;
  sideIdx = 0;
  showScreen('stageScreen');
  document.getElementById('strn').textContent = curRep.name || '';
  renderStage();
  updateSideButtons();
}
function showScreen(id){
  // (2026-08-19 DÜZELTME) ODAĞI BIRAKMAK DEĞİL, SAHNEYE VERMEK GEREKİYOR.
  // İlk hâli `blur()` çağırıyordu; masaüstünde zararsızdı ama iPad'de ters
  // tepti: iOS'ta sayfada odaklanmış bir öğe yoksa donanım klavyesinin
  // (Bluetooth pedal) tuşları sayfaya HİÇ düşmüyor — Notlar'da pedal imleci
  // oynatıyor ama tarayıcıda `?pedaltest=1` şeridi sessiz kalıyordu.
  // Çözüm: seçicideki arama kutusundan odağı almak ama boşta bırakmamak —
  // odak sahne kabına veriliyor (stageScreen'e tabindex="-1" eklendi).
  if (id === 'stageScreen') {
    // (2026-08-23) tabindex'li DIV ODAK YETMIYOR. Emir'in olcumu: pedal
    // mod 4/5/6'da (PageUp/PageDown, ok tuslari) ?pedaltest=1 seridinde HICBIR
    // olay uretmiyor; mod 7'de (fare) olay geliyor. Yani tus WKWebView'e hic
    // dusmuyor. iOS'ta bir <div>'e tabindex verip odaklamak, donanim klavyesi
    // olaylarini almak icin YETERLI DEGIL — gercek bir metin alani gerekiyor.
    //
    // EKRAN KLAVYESI RISKI: normalde input'a odaklanmak klavyeyi acar, sahnede
    // felaket olur. Iki koruma var: (1) inputmode="none" iOS'a yazi klavyesi
    // gosterme diyor; (2) harici klavye (pedal) bagliyken iOS zaten ekran
    // klavyesini bastiriyor. Klavye yine de cikarsa bu blok geri alinmali.
    try {
      // (2026-08-23 DUZELTME-4) stageScreen'in tabindex'i KALDIRILDI.
      // Olcum: odak once INPUT#_pedalOdak'a geldi, sonra ekrana dokununca
      // DIV#stageScreen'e kaydi ve orada kaldi. Sebep 08-19'da eklenen
      // tabindex="-1": <div>'i odaklanabilir yapiyor ve her dokunusta odagi
      // tuzaktan caliyor. Artik gereksiz — odagi gercek bir metin alani
      // tutuyor. Kalirsa pedal tuslari yine kaybolur.
      const sc = document.getElementById('stageScreen');
      if (sc && sc.getAttribute('tabindex') === '-1') sc.removeAttribute('tabindex');
      let tuz = document.getElementById('_pedalOdak');
      if (!tuz) {
        tuz = document.createElement('input');
        tuz.id = '_pedalOdak';
        tuz.type = 'text';
        tuz.setAttribute('inputmode', 'none');       // yazi klavyesi acma
        tuz.setAttribute('autocomplete', 'off');
        tuz.setAttribute('autocorrect', 'off');
        tuz.setAttribute('autocapitalize', 'off');
        tuz.setAttribute('spellcheck', 'false');
        tuz.setAttribute('aria-hidden', 'true');
        // Gorunmez ama ODAKLANABILIR olmali: display:none ya da
        // visibility:hidden odagi engeller. 1px, saydam, dokunulamaz.
        // (2026-08-23 DUZELTME-3) GORUNMEZ ALAN ODAK ALMIYOR. Onceki hali
        // opacity:0 + pointer-events:none + z-index:-1 idi; WebKit gercekten
        // gorunur/dokunulabilir olmayan bir metin alanina odaklanmayi reddediyor
        // olabilir. Artik alan sahiden ekranda ve dokunulabilir — sadece goze
        // carpmayacak kadar kucuk ve saydama yakin.
        tuz.style.cssText = 'position:fixed;bottom:2px;right:2px;width:24px;height:24px;' +
          'opacity:.01;border:0;padding:0;margin:0;background:transparent;' +
          'color:transparent;caret-color:transparent;font-size:16px;z-index:5;';
        (document.body || document.documentElement).appendChild(tuz);
        // Pedal disinda bir sey yazarsa (ekran klavyesi acildiysa) alani bosalt.
        tuz.addEventListener('input', function(){ tuz.value = ''; });
        // Odak baska bir yere kayarsa hemen geri al. focusout, dokunma
        // zincirinin ICINDE tetiklenir; bu yuzden focus() burada kabul edilir.
        tuz.addEventListener('focusout', function () {
          setTimeout(function () {
            try {
              if (document.getElementById('stageScreen').classList.contains('hidden')) return;
              const ae = document.activeElement;
              if (ae === tuz) return;
              // Gercek bir yazi kutusuna gectiyse (sahne notu) dokunma.
              if (ae) {
                const t = (ae.tagName || '').toUpperCase();
                if (t === 'INPUT' || t === 'TEXTAREA' || ae.isContentEditable) {
                  if (ae.id !== '_pedalOdak') return;
                }
              }
              tuz.focus({ preventScroll: true });
            } catch (e) {}
          }, 0);
        });
      }
      window._pedalOdakVer = function () {
        try {
          if (document.getElementById('stageScreen').classList.contains('hidden')) return;
          if (document.activeElement === tuz) return;
          // Kullanici gercek bir kutuya yaziyorsa (sahne notu/arama) elinden alma.
          const ae = document.activeElement;
          if (ae && ae !== document.body && ae !== tuz) {
            const t = (ae.tagName || '').toUpperCase();
            if (t === 'INPUT' || t === 'TEXTAREA' || ae.isContentEditable) return;
          }
          tuz.focus({ preventScroll: true });
        } catch (e) {}
      };
      // (2026-08-23 DUZELTME-2) EŞZAMANLI CAGIRMAK SART. Ilk halim setTimeout
      // kullaniyordu; olcum `odak=BODY` cikti, yani focus() sessizce reddedildi.
      // iOS Safari bir metin alanina PROGRAMLA odaklanmayi yalnizca kullanici
      // hareketinin (dokunma) is parcaciginda kabul ediyor; setTimeout o zinciri
      // kirar ve istek yok sayilir. showScreen zaten dokunma isleyicisinden
      // cagriliyor, bu yuzden burada HEMEN odakliyoruz.
      window._pedalOdakVer();
      // Ipucu (varsa) sahne cizildikten sonra gosterilsin.
      setTimeout(function(){ try { if (window._pedalIpucuGoster) window._pedalIpucuGoster(); } catch(e){} }, 500);

      // (2026-08-23) "Pedali etkinlestir" DUGMESI KALDIRILDI.
      // Kisa omurluydu ama sorunu cozen olcumu o verdi: dugmeyle gelen odak
      // calisiyor, kodla verilen odak calismiyordu. Cikarim su: iOS'ta
      // activeElement alani gosterse bile WKWebView klavye odagini yalnizca
      // GERCEK bir kullanici hareketiyle devrediyor.
      // Artik ayni isi sahnedeki HERHANGI bir dokunus yapiyor (asagidaki
      // `zorlaOdakla`), kullanici zaten repertuvari acarken ekrana dokunuyor —
      // yani ayri bir dugmeye gerek kalmadi.
      // Yedek deneme: gecis animasyonu bir seyi ezdiyse. Bu gecikmeli cagri
      // iOS'ta muhtemelen ise yaramaz ama masaustunde/Android'de zarari yok.
      setTimeout(window._pedalOdakVer, 300);
    } catch(e) {}
  }
  if (id !== 'stageScreen') { try { if (window._pedalIpucuGizle) window._pedalIpucuGizle(); } catch(e){} }
  ['pickerScreen','stageScreen','endScreen'].forEach(s=>document.getElementById(s).classList.toggle('hidden',s!==id));
  const tnav=document.getElementById('v2StageTopnav');if(tnav)tnav.classList.toggle('hidden',id!=='pickerScreen');
  // topnav.js header'ını sahne modunda gizle
  const rTopnav=document.querySelector('.r-topnav');
  if(rTopnav)rTopnav.style.display=id==='stageScreen'?'none':'';
  const bnav=document.getElementById('v2StageBotNav');
  const stageNav=document.getElementById('stageNavStage');
  if(bnav){
    if(id==='stageScreen'){
      bnav.style.display='flex';
      bnav.classList.add('stage-hidden'); // sahne modunda başta gizli
      if(stageNav)stageNav.style.display='flex';
    } else {
      // picker/bitiş ekranlarında kendi nav'ımızı göstermiyoruz —
      // paylaşılan topnav.js alt nav'ı (#r-bottom-nav) zaten burada görünür durumda.
      // İki ayrı nav'ın üst üste binmesi (ve ikonların tutarsız kalması) bu yüzden
      // kaldırıldı — bkz. Eserler/Repertuvarlar ikon karışıklığı bug'ı.
      bnav.style.display='none';
    }
  }
  // Paylaşılan topnav.js header/alt-navbar'ını sahne ekranında CSS ile kesin gizle —
  // giriş yoluna (eserler ?work= vs repertuvar) ve topnav.js'in geç yüklenmesine
  // bakmaksızın çalışır; stageEnter olayının yakalanmasına bağlı kalmaz.
  document.body.classList.toggle('stage-active', id==='stageScreen');
}

// ── 2026-08-19: PEDAL DESTEĞİ GENİŞLETİLDİ ────────────────────────────────
// Belirti (Emir): "iPad üzerinde pedal çalışmıyor." Sahne kodunun geri kalanı
// sağlamdı (swipe ve ok tuşları çalışıyordu); eksik olan TUŞ LİSTESİYDİ.
// Bluetooth nota çevirme pedallarının çoğu (AirTurn, PageFlip, Donner,
// iRig BlueTurn, Coda) varsayılan modda PageDown/PageUp gönderir; bazı modlar
// Enter, Backspace ya da nokta/virgül/a-b kullanır. Eski liste yalnızca ok
// tuşları ve boşluktu — pedalın tuşu geliyordu ama yok sayılıyordu.
// Üç incelik daha eklendi:
//  (1) DEBOUNCE — bazı pedallar tek basışta iki sinyal üretiyor; 250 ms
//      içindeki ikinci sinyal yok sayılıyor, yoksa tek dokunuşta iki eser
//      atlanıyordu.
//  (2) e.repeat yok sayılıyor — klavyede tuşu basılı tutunca repertuvarın
//      sonuna uçuluyordu.
//  (3) ODAK KONTROLÜ — imleç bir metin kutusundaysa tuş oraya aittir, sahne
//      gezinmesi devreye girmez.
// (2026-08-19) PEDAL TEŞHİS MODU — `?pedaltest=1` ile açılır.
// Geniş tuş listesine rağmen pedal çalışmıyorsa soru şudur: pedal iPad'e HANGİ
// tuşu gönderiyor, hatta bir şey gönderiyor mu? iPad'de konsol açmak zor
// olduğu için ekrana basıyoruz. Açıkken her keydown/keyup olayını üstte
// gösterir; pedala basınca bir şey yazmıyorsa sorun tuş listesinde DEĞİL,
// pedalın klavye olarak eşleşmemesinde ya da odakta demektir.
(function(){
  try {
    if (new URLSearchParams(location.search).get('pedaltest') !== '1') return;
    const kutu = document.createElement('div');
    kutu.style.cssText = 'position:fixed;top:8px;left:8px;right:8px;z-index:99999;'+
      'background:rgba(0,0,0,.85);color:#0f0;font:12px/1.5 monospace;padding:8px 10px;'+
      'border-radius:8px;white-space:pre-wrap;pointer-events:none;';
    kutu.textContent = _sCev('sh.pedalTeshis','PEDAL TEŞHİS — pedala bas (son 8 olay listelenir)');
    // (2026-08-19 düzeltme) Şerit ÜZERİNE YAZIYORDU, son olay öncekini siliyordu.
    // Pedal bir KOMBİNASYON gönderiyorsa (ör. Cmd+ArrowDown) sırayla dört olay
    // doğar (Meta ↓, Arrow ↓, Arrow ↑, Meta ↑) ve ekranda yalnız sonuncusu
    // kalırdı — nitekim ilk ölçümde sadece `key="Meta"` görüldü. Artık son 8
    // olay listeleniyor, dizinin tamamı görülebiliyor.
    const kayitlar = [];
    const yaz = (satir) => {
      kayitlar.push(satir);
      while (kayitlar.length > 8) kayitlar.shift();
      kutu.textContent = kayitlar.join('\n');
    };
    // (2026-08-23) Odaktaki ogeyi de yaziyoruz: pedal sorununun kaynagi odak
    // oldugu icin "tus geldi mi" kadar "odak nerede" de kritik.
    setInterval(function(){
      try {
        const ae = document.activeElement;
        const ad = ae ? ((ae.tagName||'?') + (ae.id ? '#' + ae.id : '')) : 'yok';
        const sat = 'odak=' + ad;
        if (kayitlar[kayitlar.length-1] !== sat) yaz(sat);
      } catch(e){}
    }, 2000);
    const yazTus = (e, tur) => {
      yaz(tur + ' key=' + JSON.stringify(e.key) +
          ' code=' + JSON.stringify(e.code) +
          ' keyCode=' + e.keyCode +
          (e.metaKey ? ' META' : '') + (e.ctrlKey ? ' CTRL' : '') +
          (e.altKey ? ' ALT' : '') + (e.shiftKey ? ' SHIFT' : '') +
          (e.repeat ? ' repeat' : ''));
    };
    document.addEventListener('keydown', e => yazTus(e,'↓'), true);
    document.addEventListener('keyup',   e => yazTus(e,'↑'), true);
    // (2026-08-19 genişletme) Emir'in ölçümü: pedal SAYFAYI KAYDIRIYOR ama
    // şeritte hiçbir tuş görünmüyor ⇒ olay klavye olayı OLMAYABİLİR. Bazı
    // pedallar (Lekato dâhil) belirli modlarda klavye yerine FARE TEKERLEĞİ /
    // işaretçi taklidi yapar; o zaman keydown hiç doğmaz ama `wheel` doğar ve
    // sayfa kayar — gözlenen tablo tam olarak bu. Bu yüzden tekerlek ve
    // işaretçi olayları da kaydediliyor.
    let _wn = 0;
    document.addEventListener('wheel', e => {
      _wn++;
      yaz('wheel #' + _wn + ' deltaY=' + Math.round(e.deltaY) + ' deltaX=' + Math.round(e.deltaX));
    }, true);
    document.addEventListener('pointerdown', e => {
      yaz('pointerdown type=' + e.pointerType + ' button=' + e.button);
    }, true);
    // Pedal isleyicisi buradan serite yazabilsin.
    window._pedalTeshis = yaz;
    if (document.body) document.body.appendChild(kutu);
    else document.addEventListener('DOMContentLoaded', () => document.body.appendChild(kutu));
  } catch(e) {}
})();

// (2026-08-23) ODAK KAYBOLURSA GERI AL. Sahnede ekrana dokunmak, arka plandan
// donmek ya da bir dugmeye basmak odagi tasiyabilir; odak gidince pedal tuslari
// yine sayfaya dusmez. Bu yuzden birkac noktada geri aliyoruz.
(function(){
  function geriAl(){ try { if (window._pedalOdakVer) window._pedalOdakVer(); } catch(e){} }

  // (2026-08-23 DUZELTME-6) EKRANA DOKUNMAK DA PEDALI ETKINLESTIRSIN.
  // Emir hakli olarak sordu: repertuvari acarken zaten ekrana dokunuyoruz,
  // neden yetmiyor? Sebep `_pedalOdakVer` icindeki `activeElement === tuz`
  // erken cikisi: kod odagi coktan vermis oldugu icin activeElement zaten
  // alani gosteriyor, dolayisiyla GERCEK kullanici hareketiyle odak devri
  // hic denenmiyordu. Klavye odagi ise ancak o gercek harekette devrediliyor.
  // Cozum: ilk pedal tusu gelene kadar, dokunma aninda odagi ZORLA yenile
  // (blur + focus). Tus geldikten sonra bu blok devre disi kalir.
  // (2026-08-23) PEDAL IPUCU. Sahnede ekrana bir kez dokunmak, klavye odagini
  // gizli alana devredip pedali calisir hale getiriyor (bkz. DUZELTME-6).
  // Kullanici bunu bilemez; pedal sessiz kalirsa neyin eksik oldugunu anlamaz.
  // Ama HERKESE gostermek de yanlis olurdu — cogu kullanicinin pedali yok ve
  // anlamsiz bir uyari gorurdu. Bu yuzden ipucu YALNIZCA daha once bu cihazda
  // pedal tusu gormussek cikiyor.
  function _pedalIpucuGizle(){
    var el = document.getElementById('_pedalIpucu');
    if (el) el.remove();
  }
  window._pedalIpucuGizle = _pedalIpucuGizle;

  function _pedalIpucuGoster(){
    try {
      if (window._pedalTusGeldi) return;
      if (localStorage.getItem('pedalVar') !== '1') return;   // pedalsiz kullanici gormesin
      if (document.getElementById('_pedalIpucu')) return;
      var sahne = document.getElementById('stageScreen');
      if (!sahne || sahne.classList.contains('hidden')) return;
      // (2026-08-23) IPUCU YERINE GERCEK BIR DUGME.
      // Ikon KLAVYE ya da PIYANO degil — kullanici klavye arardi. index.html'de
      // kullanilan pedal cizimi (iki dikdortgen + baglanti) burada da gecerli.
      var el = document.createElement('button');
      el.id = '_pedalIpucu';
      el.type = 'button';
      el.innerHTML =
        '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" ' +
        'stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
        '<rect x="2.5" y="6" width="7" height="12" rx="2"/>' +
        '<rect x="14.5" y="6" width="7" height="12" rx="2"/>' +
        '<path d="M9.5 9h5M9.5 15h5"/><circle cx="12" cy="12" r="1.4"/></svg>' +
        '<span>' + _sCev('sh.pedaliBagla','Pedalı bağla') + '</span>';
      // (2026-08-23) KONUM: sag alttaki ayar dugmesinin HEMEN USTUNDE, saga
      // hizali. Onceki hali ekranin ortasindaydi ve eser sozlerinin uzerine
      // biniyordu — yari saydam oldugu icin metin arkasindan gecince
      // okunamiyordu. Artik dolgun bir zemin var (saydam degil) ve soz
      // alaninin disinda duruyor.
      el.style.cssText = 'position:fixed;bottom:calc(150px + env(safe-area-inset-bottom,0px));' +
        'right:14px;z-index:9996;' +
        'display:flex;align-items:center;gap:7px;' +
        'background:#2A2410;border:1px solid rgba(255,200,61,.75);' +
        'color:#FFC83D;padding:9px 16px;border-radius:20px;font-size:13px;' +
        'font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;' +
        'box-shadow:0 6px 18px rgba(0,0,0,.5);' +
        '-webkit-tap-highlight-color:transparent;';
      // pointerdown: dokunmanin EN ERKEN aninda odakla. `click` cok gec kaliyor —
      // iOS klavye odagini yalnizca dokunusun bu asamasinda devrediyor.
      el.addEventListener('pointerdown', function (ev) {
        ev.preventDefault();              // dugme odagi kendine almasin
        try {
          var t = _odakAlani();
          t.focus({ preventScroll: true });
        } catch (e) {}
        _pedalIpucuGizle();
      });
      (document.body || document.documentElement).appendChild(el);
      // Pedalsiz calisilan bir gun olabilir — dokunulmazsa kendi kaybolsun.
      setTimeout(_pedalIpucuGizle, 15000);
    } catch (e) {}
  }
  window._pedalIpucuGoster = _pedalIpucuGoster;

  // (2026-08-23 DUZELTME-7) ODAK ARTIK SAHNEYE GIRMEDEN ONCE ALINIYOR.
  // Emir hakli olarak israr etti: "ekrana bir kez dokunun" bir yara bandi.
  // Inceleme: startStage() zaten ESZAMANLI (bekleme yok), yani dokunma zinciri
  // kopmuyordu. Gercek fark faz: calisan yol pointerdown/touchstart uzerinde,
  // sahneye giris ise CLICK uzerinde. iOS klavye odagini dokunmanin ERKEN
  // aninda devrediyor; click cok gec kaliyor.
  // Cozum: secici ekraninda repertuvara/butona dokunuldugu ANDA odagi ver.
  // O dokunus zaten yapiliyor — kullanicidan fazladan hicbir sey istemiyoruz.
  function _odakAlani(){
    let t = document.getElementById('_pedalOdak');
    if (t) return t;
    // Sahneye hic girilmemis olabilir; alani burada da olusturabilmeliyiz.
    t = document.createElement('input');
    t.id = '_pedalOdak';
    t.type = 'text';
    t.setAttribute('inputmode', 'none');
    t.setAttribute('autocomplete', 'off');
    t.setAttribute('autocorrect', 'off');
    t.setAttribute('autocapitalize', 'off');
    t.setAttribute('spellcheck', 'false');
    t.setAttribute('aria-hidden', 'true');
    t.style.cssText = 'position:fixed;bottom:2px;right:2px;width:24px;height:24px;' +
      'opacity:.01;border:0;padding:0;margin:0;background:transparent;' +
      'color:transparent;caret-color:transparent;font-size:16px;z-index:5;';
    t.addEventListener('input', function(){ t.value = ''; });
    (document.body || document.documentElement).appendChild(t);
    return t;
  }

  function zorlaOdakla(ev){
    try {
      if (window._pedalTusGeldi) return;                 // is bitti, karisma
      const sahne = document.getElementById('stageScreen');
      if (!sahne || sahne.classList.contains('hidden')) return;
      const tuz = document.getElementById('_pedalOdak');
      if (!tuz) return;
      // Gercek bir form ogesine dokunuluyorsa elini surme.
      const h = ev && ev.target;
      if (h && h.closest && h.closest('input,textarea,select,button,a,[contenteditable]')) return;
      // blur+focus: activeElement zaten alan olsa bile klavye odagini
      // kullanici hareketiyle yeniden devret.
      try { tuz.blur(); } catch(e){}
      tuz.focus({ preventScroll: true });
    } catch (e) {}
  }
  // (2026-08-23 DUZELTME-10) ERKEN OLUSTURMA GERI ALINDI.
  // DUZELTME-8/9'da alani sayfa acilisinda kuruyorduk. Sonuc: hem dokunmadan
  // calismadi, hem de DAHA ONCE CALISAN "ekrana dokun" yolu bozuldu (Emir
  // bildirdi). Calisan yapiya donuyoruz: alan sahneye girilirken olusturuluyor
  // ve odak yalnizca SAHNE ACIKKEN aliniyor.
  document.addEventListener('pointerdown', zorlaOdakla, true);
  document.addEventListener('touchstart', zorlaOdakla, true);

  // Dokunma isleyicisinin ICINDE, eszamanli — gecikme kullanici hareketi
  // zincirini kirar ve iOS odak istegini reddeder.
  document.addEventListener('pointerup', geriAl, true);
  document.addEventListener('touchend', geriAl, true);
  document.addEventListener('visibilitychange', function(){
    if (document.visibilityState === 'visible') setTimeout(geriAl, 120);
  });
  window.addEventListener('focus', function(){ setTimeout(geriAl, 120); });
  window.addEventListener('pageshow', function(){ setTimeout(geriAl, 120); });
})();

// ── 2026-08-23: PEDAL ONCE SAYFA CEVIRIR, SONRA ESER GECER ───────────────
// Emir sordu: uzun sozlu bir eserde alt kisim ekrana sigmiyor, icra sirasinda
// nasil okunacak? Parmakla kaydirilabiliyor ama sahnede iki el de dolu.
// Sayfa cevirici pedallarin varlik sebebi tam olarak bu: once EKRANI cevirir,
// icerik bitince ESERE gecer. Kisa eserlerde kaydirilacak sey olmadigi icin
// davranis degismez — dogrudan sonraki esere gecilir.
// (2026-08-23 DUZELTME) KAYDIRILAN OGE SABIT DEGIL. Ilk hali dogrudan #sm'i
// kullaniyordu ve calismadi (Emir: "sayfanin altina gitmiyor, sonraki esere
// geciyor"). Icerik duzenine gore tasan oge #sm degil, ic kapsayici ya da
// belgenin kendisi olabiliyor. Bu yuzden adaylari sirayla deneyip GERCEKTEN
// tasani seciyoruz.
function _sozAlani(){
  const adaylar = [
    document.getElementById('sm'),
    document.querySelector('#stageScreen .wlyrics'),
    document.querySelector('#stageScreen .sm'),
    document.getElementById('stageScreen'),
    document.scrollingElement,
    document.documentElement,
    document.body
  ];
  for (const el of adaylar) {
    if (!el) continue;
    if (el.scrollHeight > el.clientHeight + 8) return el;
  }
  return null;
}

// Bir "sayfa" = gorunur yuksekligin %85'i. Kalan %15 baglam icin: okuyucu
// nerede kaldigini kaybetmesin diye son satirlar ustte tekrar goruntulenir.
function _sayfaCevir(yon){
  const k = _sozAlani();
  if (!k) return false;
  const gorunur = k.clientHeight;
  const toplam  = k.scrollHeight;
  if (toplam <= gorunur + 8) return false;          // kaydirilacak sey yok
  const adim = Math.max(gorunur * 0.85, 120);
  if (yon === 'ileri') {
    // Dibe 4px kala "bitti" say — kesirli piksel yuzunden asla tam esitlenmiyor.
    if (k.scrollTop + gorunur >= toplam - 4) return false;
    k.scrollTo({ top: Math.min(k.scrollTop + adim, toplam - gorunur), behavior: 'smooth' });
    return true;
  } else {
    if (k.scrollTop <= 4) return false;
    k.scrollTo({ top: Math.max(k.scrollTop - adim, 0), behavior: 'smooth' });
    return true;
  }
}

// Pedalin tek giris noktasi: once sayfa, olmazsa eser.
function _pedalHareket(yon){
  if (typeof window._pedalTeshis === 'function') {
    const k = _sozAlani();
    window._pedalTeshis(k
      ? ('kaydir? ' + k.tagName + (k.id ? '#' + k.id : '') +
         ' top=' + Math.round(k.scrollTop) +
         ' h=' + k.clientHeight + '/' + k.scrollHeight)
      : 'kaydirilacak oge YOK');
  }
  if (_sayfaCevir(yon)) return;
  if (yon === 'geri') prevWork(); else nextWork();
}

// ── 2026-08-23: NATIVE PEDAL KOPRUSU (yalnizca yuklu uygulamada) ─────────
// iOS'ta WKWebView, pedalin gonderdigi PageUp/PageDown tuslarini web icerigine
// iletmiyor — klavye odagi ancak GERCEK bir kullanici hareketiyle devrediliyor.
// Tarayicida caresi "sahnede bir kez ekrana dokunmak"; native tarafta ise
// GCKeyboard tuslari odaktan BAGIMSIZ yakaliyor (bkz. PedalKoprusu.swift) ve
// buraya ozel bir olay olarak gonderiyor. Boylece dokunma ihtiyaci kalkiyor.
(function(){
  // Native ile web ayni basisi iki kez tetikleyebilir (odak varsa keydown de
  // dogar). Ortak zaman damgasi `_sonPedal` uzerinden paylasiliyor.
  window.addEventListener('nativePedal', function (e) {
    try {
      const sahne = document.getElementById('stageScreen');
      if (!sahne || sahne.classList.contains('hidden')) return;
      if (typeof _yaziAlanindaMi === 'function' && _yaziAlanindaMi()) return;
      const simdi = Date.now();
      if (simdi - _sonPedal < 250) return;      // cift tetikleme korumasi
      _sonPedal = simdi;
      const yon = (e && e.detail && e.detail.yon) || 'ileri';
      if (typeof window._pedalTeshis === 'function') {
        window._pedalTeshis('>> NATIVE: ' + yon);
      }
      _pedalHareket(yon);
    } catch (err) {}
  });

  // Pedal bagli oldugunu native taraf bildirdi: artik odak numaralarina ve
  // "Pedali bagla" dugmesine gerek yok.
  window.addEventListener('nativePedalDurum', function (e) {
    try {
      const bagli = !!(e && e.detail && e.detail.bagli);
      if (!bagli) return;
      window._pedalTusGeldi = true;             // odak zorlamasini sustur
      try { localStorage.setItem('pedalVar', '1'); } catch (err) {}
      if (window._pedalIpucuGizle) window._pedalIpucuGizle();
      if (typeof window._pedalTeshis === 'function') {
        window._pedalTeshis('>> NATIVE: pedal bagli');
      }
    } catch (err) {}
  });
})();

const _PEDAL_ILERI = ['ArrowRight',' ','Spacebar','ArrowDown','PageDown','Enter','.',',','b','B'];
const _PEDAL_GERI  = ['ArrowLeft','ArrowUp','PageUp','Backspace','a','A'];
let _sonPedal = 0;

// (2026-08-19 düzeltme) ODAK KONTROLÜ PEDALI YUTUYORDU.
// Emir: pedal (Lekato WT-6) DAHA ÖNCE ÇALIŞIYORDU, bu turdan sonra durdu.
// Sebep bu fonksiyonun ilk hâliydi: seçici ekranındaki ARAMA KUTUSU odakta
// kalınca — sahneye geçilse bile odak orada kalabiliyor — pedalın gönderdiği
// ok tuşları "metin kutusuna ait" sayılıp yok sayılıyordu. Artık yalnızca
// GÖRÜNÜR bir metin kutusu tuşu sahiplenebiliyor: gizli ekranda kalmış bir
// input'un `offsetParent`'ı null olur, o durumda tuş sahneye gider.
function _yaziAlanindaMi(){
  const el = document.activeElement;
  if (!el || el === document.body) return false;
  // (2026-08-23) Pedal odak tuzagi bir <input>, ama KULLANICININ yazdigi bir
  // kutu degil — tam tersine tuslari sahneye getirmek icin var. Muaf tutulmali,
  // yoksa her tus "metin kutusuna ait" sayilip yok sayilirdi.
  if (el.id === '_pedalOdak') return false;
  const t = (el.tagName||'').toUpperCase();
  const yaziKutusu = (t === 'INPUT' || t === 'TEXTAREA' || el.isContentEditable);
  if (!yaziKutusu) return false;
  // Gizli/ekran dışı öğe odakta kalmış olabilir — o zaman tuş sahnenindir.
  const gorunur = !!(el.offsetParent || el.getClientRects().length);
  if (!gorunur) return false;
  // Sahne ekranı açıkken yalnızca SAHNE İÇİNDEKİ bir kutu tuşu sahiplenir.
  const sahne = document.getElementById('stageScreen');
  if (sahne && !sahne.classList.contains('hidden')) return sahne.contains(el);
  return true;
}

// (2026-08-23) YAKALAMA FAZINA ALINDI + ADIM ADIM TESHIS.
// Bagimsiz test sayfasi (pedaltest.html) kanitladi: iOS Safari pedalin
// PageUp/PageDown tuslarini sayfaya VERIYOR. Demek ki tusu yutan sey bu
// dosyanin icinde. Iki degisiklik:
//   (a) Dinleyici artik YAKALAMA fazinda (ucuncu arguman true). Kabarma
//       fazindayken aradaki bir ogenin stopPropagation() cagirmasi olayi
//       tamamen kesebiliyordu; yakalama fazi hedefe inmeden once calisir.
//   (b) ?pedaltest=1 acikken her erken cikis serite yaziliyor — bes ayri
//       `return` vardi ve hangisinde takildigimizi goremiyorduk.
document.addEventListener('keydown',e=>{
  const _tt = (typeof window._pedalTeshis === 'function') ? window._pedalTeshis : null;
  // Ilk gercek tus: klavye odagi devredilmis demektir. Bayrak `zorlaOdakla`
  // blogunu susturur — her dokunusta blur+focus yapmaya gerek kalmaz.
  if (!window._pedalTusGeldi) {
    window._pedalTusGeldi = true;
    // (2026-08-23) CIHAZ "PEDALLI" OLARAK ISARETLENIYOR. Amac: pedali OLMAYAN
    // kullaniciya asla pedal ipucu gostermemek. Bir kez gercek pedal tusu
    // geldiyse bu cihazda pedal var demektir; ipucu ancak o zaman anlamli.
    try { localStorage.setItem('pedalVar', '1'); } catch (e) {}
    _pedalIpucuGizle();
  }
  if(document.getElementById('stageScreen').classList.contains('hidden')){
    if(_tt) _tt('atlandi: sahne kapali (' + e.key + ')');
    return;
  }
  if(e.key==='Escape'){exitStage({stopPropagation:()=>{}});return;}
  if(_yaziAlanindaMi()){
    const ae=document.activeElement;
    if(_tt) _tt('atlandi: yazi alani=' + ((ae&&ae.tagName)||'?') + ((ae&&ae.id)?'#'+ae.id:''));
    return;
  }
  if(e.repeat){ if(_tt) _tt('atlandi: repeat'); return; }
  const ileri = _PEDAL_ILERI.includes(e.key);
  const geri  = _PEDAL_GERI.includes(e.key);
  if(!ileri && !geri){ if(_tt) _tt('atlandi: liste disi key=' + JSON.stringify(e.key)); return; }
  const simdi = Date.now();
  if(simdi - _sonPedal < 250){
    if(_tt) _tt('atlandi: debounce (' + (simdi-_sonPedal) + 'ms)');
    e.preventDefault(); return;
  }
  if(_tt) _tt('>> GECERLI: ' + (ileri ? 'ileri' : 'geri'));
  _sonPedal = simdi;
  e.preventDefault();
  _pedalHareket(ileri ? 'ileri' : 'geri');
}, true);

// Yatay swipe → eser geçişi | Swipe up → bottom nav aç (4sn sonra kapan)
let txStart=0, tyStart=0;
let _navTimer=null;
function openStageNav(){
  const bnav=document.getElementById('v2StageBotNav');
  if(!bnav)return;
  bnav.classList.remove('stage-hidden');
  scheduleStageNavHide();
  // Fare/parmak menünün üzerindeyken kapanmasın; ayrılınca sayaç yeniden başlasın
  if(!bnav.dataset.hoverBound){
    bnav.dataset.hoverBound='1';
    const stay=()=>{ if(_navTimer)clearTimeout(_navTimer); };
    bnav.addEventListener('mouseenter',stay);
    bnav.addEventListener('touchstart',stay,{passive:true});
    bnav.addEventListener('mouseleave',scheduleStageNavHide);
  }
}
// Otomatik kapanma süresi: telefonda güfteyi kapattığı için kapanır (8sn),
// masaüstü/tabletde yer sorunu yok — hiç kapanmaz, kullanıcı seçene kadar durur.
function scheduleStageNavHide(){
  const bnav=document.getElementById('v2StageBotNav');
  if(!bnav)return;
  if(_navTimer)clearTimeout(_navTimer);
  // Her ekran boyutunda kapanır (10sn). Eskiden masaüstü/tablette hiç kapanmıyordu
  // ve menü sürekli ekranda kalıyordu. Fare/parmak üzerindeyken sayaç durur.
  _navTimer=setTimeout(()=>bnav.classList.add('stage-hidden'),10000);
}
// (2026-08-13) Görünüm Ayarları panelinde başlayan dokunuşlar swipe SAYILMAZ.
// Sebep: paneldeki kaydırıcıları (yazı boyutu, ton) yatayda 60px'den fazla
// sürüklemek bu dinleyiciyi tetikliyor ve ayar yaparken ESER ATLIYORDU.
// Panelin mevcut 'stay' dinleyicisi yalnızca otomatik gizlemeyi durduruyor,
// olayı durdurmuyordu.
let _swipeYoksay=false;
document.addEventListener('touchstart',e=>{
  if(document.getElementById('stageScreen').classList.contains('hidden'))return;
  _swipeYoksay = !!(e.target && e.target.closest && e.target.closest('#stageToolsPanel, input[type="range"]'));
  txStart=e.touches[0].clientX;
  tyStart=e.touches[0].clientY;
},{passive:true});
document.addEventListener('touchend',e=>{
  if(document.getElementById('stageScreen').classList.contains('hidden'))return;
  if(_swipeYoksay){ _swipeYoksay=false; return; }
  const dx=e.changedTouches[0].clientX-txStart;
  const dy=e.changedTouches[0].clientY-tyStart;
  // Yalnızca yatay swipe → eser geçişi. Yukarı swipe ile alt navbar AÇMA kaldırıldı:
  // sahne modunda navbar istenmiyor, güfteyi kaydırırken kazara açılıp alt barı
  // (yazı boyutu kontrolünü) örtüyordu. Çıkış için Görünüm Ayarları (⚙) menüsündeki
  // liste butonu kullanılabilir.
  if(Math.abs(dx)>60&&Math.abs(dx)>Math.abs(dy)){
    dx<0?nextWork():prevWork();
  }
},{passive:true});

// ── NAVİGASYON ──
let sideList = [];
let sideIdx  = -1;

function sideNavInit(workId) {
  const stored = localStorage.getItem('stageWorkList');
  if (stored) {
    try { sideList = JSON.parse(stored); } catch(e) { sideList = []; }
    sideIdx = sideList.indexOf(String(workId));
  }
  updateSideButtons();
}

function updateSideButtons() {
  const l = document.getElementById('sideLeft');
  const r = document.getElementById('sideRight');
  if (!l || !r) return;
  const isRepMode = curRep && curRep.items && curRep.items.length > 1;
  const total = isRepMode ? curRep.items.length : sideList.length;
  const cur   = isRepMode ? curIdx : sideIdx;
  l.style.display = r.style.display = total > 1 ? 'flex' : 'none';
  l.classList.toggle('disabled', cur <= 0);
  r.classList.toggle('disabled', cur >= total - 1);
}

function sideNavPrev() {
  if (curRep && curRep.items && curRep.items.length > 1) {
    if (curIdx <= 0) return;
    curIdx--;
    renderStage();
    updateSideButtons();
    return;
  }
  if (sideIdx <= 0) return;
  sideIdx--;
  loadSideWork(sideList[sideIdx]);
}

function sideNavNext() {
  console.log('sideNavNext called, curIdx='+curIdx+', items='+(curRep&&curRep.items?curRep.items.length:0));
  if (curRep && curRep.items && curRep.items.length > 1) {
    if (curIdx >= curRep.items.length - 1) { showEndScreen(); return; }
    curIdx++;
    renderStage();
    updateSideButtons();
    return;
  }
  if (sideIdx >= sideList.length - 1) return;
  sideIdx++;
  loadSideWork(sideList[sideIdx]);
}

function loadSideWork(id) {
  const w = WL[id];
  if (!w) return;
  curRep = { id: 'single', name: w.name||'', items: [{ workId: id, closingNote: w.closingNote||'' }] };
  curIdx = 0;
  sideIdx = sideList.indexOf(String(id));
  document.getElementById('strn').textContent = w.name || '';
  renderStage();
  updateSideButtons();
}
// Init
(async()=>{
  const urlParams = new URLSearchParams(window.location.search);
  const _shareToken = urlParams.get('share');

  // Paylaşım modu: login gerekmez
  if (!_shareToken) {
    if (typeof requireAuth === 'function') {
      const ok = await requireAuth();
      if (!ok) return;
    }
  }

  // Arka planda sync yap (online ise IndexedDB'yi güncelle)
  if (window.syncOfflineData) setTimeout(() => syncOfflineData(), 800);

  // WL (works) yüklemesi: tek-eser (?work=) ve paylaşım (?share=) linkleri WL'ye
  // bağımlı olduğundan onlar için BEKLE; normal picker açılışında ise BEKLEME —
  // picker repertuvarları works olmadan da listelenir, eser adları sonra dolar.
  const _needsWL = urlParams.get('work') || urlParams.get('share');
  if (_needsWL) {
    await loadWL();
  } else {
    loadWL().then(() => {
      // works geldi: picker VE (açıksa) sahne ekranını tazele — sahnede
      // eser_id (örn. 37) yerine gerçek ad+güfte gelsin.
      if (window._rsRefreshAfterWorks) window._rsRefreshAfterWorks();
    });
  }

  // Paylaşım linki: ?share=token → token'dan rep ID çöz, Supabase'den yükle
  const shareToken = urlParams.get('share');
  if (shareToken) {
    try {
      const repId = atob(shareToken + '=='.slice(0, (4 - shareToken.length % 4) % 4));
      // (2026-08-19) Paylaşım bağlantısı da OTURUM JETONUYLA açılıyor (H).
      // Jeton yoksa H zaten anon anahtara düşüyor, yani giriş yapmamış ziyaretçi
      // için davranış aynı. Ama GİRİŞ YAPMIŞ biri bağlantıyı açtığında kendi
      // yetkisiyle okuyor: kişisel paylaşımla kendisine açılmış ya da grubuna
      // paylaşılmış bir repertuvar artık açılabiliyor — anon istekte RLS yalnız
      // visibility='public' verdiği için bunlar boş dönüyordu.
      const [rRes, iRes] = await Promise.all([
        fetch(SUPA_URL+'/rest/v1/repertoires?id=eq.'+repId, { headers: H }),
        fetch(SUPA_URL+'/rest/v1/repertoire_items?repertoire_id=eq.'+repId+'&order=seq', { headers: H })
      ]);
      const reps = await rRes.json();
      const items = await iRes.json();
      if (reps && reps[0]) {
        curRep = {
          ...reps[0],
          items: (items||[]).map(t => ({
            ...t, workId: String(t.work_id), closingNote: t.closing_note||'', performer: t.performer||''
          }))
        };
        curIdx = 0;
        showScreen('stageScreen');
        document.getElementById('strn').textContent = curRep.name || '';
        renderStage();
        // Tüm eserleri sideList'e yükle - önceki/sonraki geçiş için
        // Paylaşım modunda sideList boş bırak - sadece curRep/curIdx kullan
        sideList = [];
        sideIdx = -1;
        updateSideButtons();
        initBackBtn();
        return;
      }
    } catch(e) { console.error('Share token error:', e); }
  }

  const workParam = urlParams.get('work');
  if (workParam && !isNaN(parseInt(workParam))) {
    const normalizedId = String(parseInt(workParam));
    // WL bir an boş olsa bile picker'a DÜŞME — tek-eser sahnesine gir, ad/güfte
    // works gelince _rsRefreshAfterWorks() ile kendini tazeler. (Eskiden if(w)
    // koşulu WL boşken bu yolu atlayıp picker'a düşürüyordu.)
    const w = WL[normalizedId] || WL[workParam] || {};
    {
      curRep = {
        id: 'single',
        name: w.name || _sCev('sh.adsizEser','Eser'),
        items: [{ workId: normalizedId, closingNote: w.closingNote || '' }]
      };
      curIdx = 0;
      // Repertuvar yolundaki startStage() ile AYNI giriş dizisi — eksik olması,
      // eserler.html'den tek eserle girildiğinde topnav.js'in paylaşılan alt
      // navbar'ı (#r-bottom-nav) gizlememesine yol açıyordu (stageEnter olayı hiç
      // atılmıyordu). Repertuvardan girişte çalışıp buradan çalışmamasının sebebi buydu.
      window._stageActive = true;
      window.dispatchEvent(new Event('stageEnter'));
      applyStageTheme('stage');
      showScreen('stageScreen');
      document.getElementById('strn').textContent = w.name || '';
      renderStage();
      sideNavInit(normalizedId);
      initBackBtn();
      return;
    }
  }

  reps=await loadReps();
  setTheme(localStorage.getItem('stageTheme')||'night');

  // (2026-08-19) SEÇİCİ EKRANI BİR AN GÖRÜNÜP KAPANIYORDU. Emir: "repertuvarı
  // seçip 'Sahne modunda aç' dediğimde bir an stage'in repertuvar listesi
  // görünüp kapanıyor, kirli bir durum." Sebep sıralamaydı: seçici KOŞULSUZ
  // gösterilip çizildikten SONRA localStorage'daki stageRepId okunuyor ve
  // 100 ms'lik bir zamanlayıcıyla sahneye geçiliyordu. Artık önce hedef
  // repertuvar var mı diye bakılıyor; varsa seçici HİÇ gösterilmiyor ve
  // gecikme de gerekmiyor (pickRep/startStage aynı karede çalışıyor).
  const autoId = localStorage.getItem('stageRepId');
  const _hedef = autoId ? reps.find(r => r.id === autoId) : null;
  if (autoId) localStorage.removeItem('stageRepId');

  if (_hedef) {
    renderPicker();          // seçim mantığı listeye dayandığı için çizilmeli
    pickRep(autoId);         // ama ekran gösterilmiyor — doğrudan sahneye
    startStage();
    initBackBtn();
    return;
  }

  showScreen('pickerScreen');
  renderPicker();
  initBackBtn();
})();

// ── MOBİL SWIPE DESTEĞİ — KALDIRILDI (2026-08-06) ──
// Burada İKİNCİ bir document touchstart/touchend çifti vardı ve yukarıdaki
// swipe kodundan bağımsız olarak sideNavNext/sideNavPrev çağırıyordu.
// Sonuç: tek bir parmak hareketinde İKİ dinleyici birden tetikleniyor ve
// eserler İKİŞER İKİŞER atlanıyordu (Emir bildirdi). Ayrıca bu kopya
// nextWork/prevWork yerine sideNav*'i çağırdığı için nota sayfa çevirmeyi
// de atlıyordu — çok sayfalı notada swipe sayfayı değil eseri değiştiriyordu.
// Tek yetkili swipe kodu yukarıda (eşik 60px, nextWork/prevWork üzerinden).

</script>

<nav id="v2StageBotNav">
  <!-- Stage screen: sahneye özel nav — picker/bitiş ekranlarında paylaşılan topnav.js alt nav'ı (#r-bottom-nav) kullanılıyor -->
  <div class="v2-bn-items" id="stageNavStage" style="display:none;">
    <a href="#" class="v2-bn-item" id="btnGoBack" onclick="goBack(event)"><i class="ti ti-arrow-left" style="font-size:20px;line-height:1;" aria-hidden="true"></i><span class="v2-bn-label" id="btnGoBackLbl" data-i18n="sh.geriDon">Geri Dön</span></a>
    <a href="index.html" class="v2-bn-item" id="btnStageHome"><i class="ti ti-home" style="font-size:20px;line-height:1;" aria-hidden="true"></i><span class="v2-bn-label" data-i18n="sh.anaSayfa">Ana Sayfa</span></a>
    <button class="v2-bn-item v2-bn-exit" onclick="event.stopPropagation();exitStage(event)" style="background:none;border:none;cursor:pointer;flex:1;flex-direction:column;gap:3px;"><i class="ti ti-x" style="font-size:20px;line-height:1;" aria-hidden="true"></i><span class="v2-bn-label" data-i18n="sh.cik">Çık</span></button>
  </div>
</nav>
<script>
(function(){
  const _sp=new URLSearchParams(window.location.search).get('share');
  if(!_sp && typeof requireAuth==='function'){
    requireAuth().then(()=>{
      const u=getUser&&getUser();if(!u)return;
      const name=u?.user_metadata?.full_name||u?.email?.split('@')[0]||'—';
      const ini=name.charAt(0).toUpperCase();
      const a=document.getElementById('stnAvatar');if(a)a.textContent=ini;
      const n=document.getElementById('stnUserName');if(n)n.textContent=name;
    });
  }
})();

// --- SYNC/ONLINE OTOMATİK TAZELEME (stage) ---
// Ağ değişince veya sync bitince picker açıksa listeyi tazele. Sadece picker
// görünürken ve kullanıcı kaydırma yapmıyorken çiz (açık swipe'ı bozmamak için).
(function() {
  let _rt;
  function _refreshAfterWorks() {
    clearTimeout(_rt);
    _rt = setTimeout(function() {
      var swipeOk = (typeof _rsSwipe === 'undefined' || !_rsSwipe) &&
                    (typeof _rsOpenCard === 'undefined' || !_rsOpenCard);
      if (!swipeOk) return; // açık swipe'ı bozma
      var picker = document.getElementById('pickerScreen');
      var stage  = document.getElementById('stageScreen');
      // Picker açıksa listeyi tazele
      if (picker && !picker.classList.contains('hidden') &&
          typeof renderPicker === 'function') {
        renderPicker();
      }
      // Sahne açıksa: SADECE ekranda şu an placeholder duruyorsa VE ad artık
      // geldiyse bir kez yeniden çiz. Ad zaten doğru görünüyorsa dokunma —
      // gereksiz re-render titreme (flicker) yapar.
      if (stage && !stage.classList.contains('hidden') &&
          typeof curRep !== 'undefined' && curRep &&
          typeof renderStage === 'function' && _stageShowsPlaceholder) {
        var _it = (curRep.items || [])[curIdx];
        var _nowResolved = _it && WL[_it.workId] && WL[_it.workId].name;
        if (_nowResolved) renderStage();
      }
    }, 150);
  }
  // loadWL().then() de bunu çağırıyor (init'te)
  window._rsRefreshAfterWorks = _refreshAfterWorks;
  window.addEventListener('data-synced', _refreshAfterWorks);
  window.addEventListener('online', _refreshAfterWorks);
})();

// ── 2026-08-22: EKRAN UYANIK TUTMA (Screen Wake Lock) ─────────────────────
// Sahnede telefonun kendiliginden kilitlenmesi, uygulamanin guvenilirligini
// dogrudan vuruyordu. Bu blok, SADECE sahne ekrani acikken ekrani uyanik tutar.
//
// NEDEN body SINIFINI IZLIYORUZ: showScreen() zaten her geciste
// `document.body.classList.toggle('stage-active', ...)` yapiyor. Fonksiyonu
// duzenlemek yerine bu sinifi dinlemek, ileride yeni bir gecis yolu eklense
// bile kilidin dogru davranmasini saglar (tek dogruluk noktasi).
//
// iOS TUZAGI: Web Wake Lock API'de uygulama arka plana gecince kilit SESSIZCE
// birakilir ve one donunce KENDILIGINDEN GERI ALINMAZ. Bu yuzden
// visibilitychange / pageshow / focus uzerinden yeniden istiyoruz. Gorunur
// degilken istek zaten reddedilir, o yuzden sadece 'visible' halinde deniyoruz.
(function(){
  var _wl = null;        // aktif WakeLockSentinel
  var _istendi = false;  // sahne acik mi — kilidin OLMASI GEREKEN hali
  var _destek = !!(navigator.wakeLock && typeof navigator.wakeLock.request === 'function');

  function _sahneAcik(){
    return !!(document.body && document.body.classList.contains('stage-active'));
  }

  function _al(){
    if(!_destek || !_istendi) return;
    if(_wl) return;                                   // zaten elimizde
    if(document.visibilityState !== 'visible') return; // gorunmezken reddedilir
    navigator.wakeLock.request('screen').then(function(s){
      _wl = s;
      s.addEventListener('release', function(){ _wl = null; });
    }).catch(function(e){
      _wl = null;
      console.warn('wakeLock alinamadi:', e && e.name, e && e.message);
    });
  }

  function _birak(){
    _istendi = false;
    if(_wl){ try{ _wl.release(); }catch(e){} _wl = null; }
  }

  function _senkron(){
    if(_sahneAcik()){ _istendi = true; _al(); }
    else { _birak(); }
  }

  try{
    new MutationObserver(_senkron).observe(document.body,
      { attributes:true, attributeFilter:['class'] });
  }catch(e){}

  document.addEventListener('visibilitychange', function(){
    if(document.visibilityState === 'visible') _al();
  });
  window.addEventListener('pageshow', _al);
  window.addEventListener('focus', _al);

  // Test icin: sahnedeyken konsola window._wlDurum() yaz.
  window._wlDurum = function(){
    return { destek:_destek, sahneAcik:_sahneAcik(), istendi:_istendi,
             kilitAktif: !!_wl, gorunur: document.visibilityState };
  };

  _senkron();
})();

</script>
</body>
</html>