<!--
  STAGE.HTML — DEĞİŞİKLİK GÜNLÜĞÜ (en üstte tutulur; her önemli özellik değişikliğinde güncellenir)
  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-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>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;align-items:center;justify-content:space-between;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface);gap:8px;position:relative;z-index:401;}
#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;max-width:32%;min-width:0;flex:0 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);}
.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;}
}

/* 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:6px 16px 8px;text-align:center;position:relative;z-index:5;}
.smhead .wtitle{margin-bottom:4px;}
.smhead .wnum{margin-bottom:2px;}
.sm{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:6px 16px calc(60px + env(safe-area-inset-bottom));position:relative;overflow-y:auto;scrollbar-width:none;}.sm::-webkit-scrollbar{display:none;}
.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;}
/* 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;}
.wlyrics{font-size:calc(clamp(18px,2.8vw,28px) * var(--lyrics-scale,1));color:var(--text);text-align:center;width:100%;max-width:100%;line-height:1.9;opacity:0;animation:si .4s ease .28s forwards;margin-top:16px;padding:0 4px 16px;box-sizing:border-box;overflow-x:auto;-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 */
.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(--accent,#4DA3FF);font-style:italic;font-size:.7em;margin:10px 0 2px;opacity:.85;}
.wlyrics .cp-seg{display:inline-block;position:relative;vertical-align:bottom;}
.wlyrics .cp-chord{display:block;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;}
/* 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) */
[data-theme="light"]{--chord-color:#B26A00;}
.wlyrics .cp-lyric{display:block;white-space:pre-wrap;}

.sb{padding:0 16px 16px;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;}
.sb-menu{position:absolute;right:16px;bottom:calc(100% + 6px);z-index:11;}
.sb-menu-btn{background:var(--surface);border:1px solid var(--border);border-radius:8px;width:34px;height:34px;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: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;}

.np{background:var(--surface);border:1px solid #FFC83D;border-radius:10px;padding:6px 16px;flex:1;min-width:0;max-width:400px;opacity:0;animation:fi .5s ease .4s forwards;}
.nl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);margin-bottom:4px;font-weight:600;}
.nn{font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;}
.nm{font-size:12px;color:var(--text2);margin-top:3px;font-weight:500;}
.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}}

.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);}
.font-slider-wrap{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:30px;padding:7px 14px;flex-shrink:0;}
.font-slider-wrap .fs-a-sm{font-size:12px;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);}
.font-slider{-webkit-appearance:none;appearance:none;width:110px;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer;}
.font-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer;border:none;}
.font-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer;border:none;}
.font-slider::-moz-range-track{height:4px;border-radius:2px;background:transparent;}
@media (max-width:768px){ .font-slider{width:52px;} .font-slider-wrap{padding:5px 9px;gap:5px;} .font-slider-wrap .fs-a-sm{font-size:11px;} .font-slider-wrap .fs-a-lg{font-size:16px;} .font-slider::-webkit-slider-thumb{width:18px;height:18px;} .font-slider::-moz-range-thumb{width:18px;height: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);}

.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; }
    .strn { font-size:12px; max-width:88px; 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 16px; 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:200px; }
  }
  @media (max-width: 480px) {
    .wtitle { font-size:clamp(18px,5vw,26px); }
    .wlyrics { font-size:calc(clamp(14px,4.2vw,20px) * var(--lyrics-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 12px; 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(16px + 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; }
}

.stage-info-btn{background:none;border:none;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;transition:all .15s;flex-shrink:0;}
.stage-info-btn:hover{color:var(--text);}
.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="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ü" 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">Sahne Moduna Hoş Geldiniz</h1>
      <p class="psub">Sahne performansınız için bir repertuvar seçiniz</p>
      <input type="text" id="stageSearchInput" placeholder="Repertuvar veya eser adı ara..." 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">Yükleniyor...</div></div>
    </div>
    <div class="pi-fixed-bottom">
      <button class="bstart" id="bstart" disabled onclick="startStage()">Sahneye Çık →</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;">☀️ 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;">🌙 Gece</div>
      </div>
    </div>
  </div>
</div>

<div class="screen hidden" id="stageScreen">
  <div class="stb">
    <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 style="display:flex;align-items:center;gap:4px;">
      <div class="vm-tabs" id="viewModeTabs" role="tablist" aria-label="Görünüm">
        <button class="vm-tab" data-mode="lyrics" role="tab" title="Söz" onclick="event.stopPropagation();setViewMode('lyrics')"><i class="ti ti-music" aria-hidden="true"></i><span class="vm-lbl">Söz</span></button>
        <button class="vm-tab" data-mode="chords" role="tab" title="Akor" onclick="event.stopPropagation();setViewMode('chords')"><i class="ti ti-guitar-pick" aria-hidden="true"></i><span class="vm-lbl">Akor</span></button>
        <button class="vm-tab" data-mode="nota" role="tab" title="Nota" onclick="event.stopPropagation();setViewMode('nota')"><i class="ti ti-file-music" aria-hidden="true"></i><span class="vm-lbl">Nota</span></button>
      </div>
      <button class="stage-info-btn" onclick="openInfoSheet()" title="Eser Bilgileri">
        <i class="ti ti-info-circle" style="font-size:22px;"></i>
      </button>
    </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>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>
  <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ı" class="sb-menu-btn"><i class="ti ti-adjustments-horizontal"></i></button>
      <div id="stageToolsPanel" style="display:none;position:fixed;bottom:80px;right:12px;left:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px;gap:8px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.5);">
        <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;" id="stageToolsRow"></div>
      </div>
    </div>
    <div class="np" id="np" style="display:none;">
      <div class="nl">Sıradaki</div>
      <div class="nn" id="nn">—</div>
      <div class="nm" id="nm">—</div>
    </div>
    <div class="font-slider-wrap" style="margin-left:auto;" title="Yazı Boyutu">
      <button type="button" class="fs-a-sm fs-step" onclick="event.stopPropagation();stepLyricsFont(-0.1)" title="Yazıyı küçült">A−</button>
      <input type="range" id="lyricsFontSlider" class="font-slider" min="0.75" max="1.6" step="0.1" value="1"
        oninput="setLyricsFontScale(this.value)">
      <button type="button" class="fs-a-lg fs-step" onclick="event.stopPropagation();stepLyricsFont(0.1)" title="Yazıyı büyüt">A+</button>
    </div>
    <div class="th" style="display:none;">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">Bravo!</h1>
  <p class="es" id="ern">Repertuvar tamamlandı</p>
  <p class="ec" id="erc">0 eser</p>
  <div class="ea">
    <button class="be bep" onclick="restartStage()">↺ Baştan Başla</button>
    <button class="be beg" id="btnRepertuvarSec" onclick="backToPicker()">Repertuvar Seç</button>
    <a href="index.html" class="be beg" id="btnAnaSayfa">Ana Sayfa</a>
  </div>
</div>

<script>
const H = {'apikey':SUPA_KEY,'Authorization':'Bearer '+SUPA_KEY,'Content-Type':'application/json'};

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('📵 Çevrimdışı mod — yerel veriler gösteriliyor'); }
}

async function loadWL() {
  try {
    let rows = [];
    try {
      // works PAYLAŞILAN referans veri — kullanıcıya özel değil. Süresi dolmuş
      // sb_token 401 verip WL'i boş bırakmasın diye ANON key (SUPA_KEY) ile çekiyoruz;
      // repertuvarları da (picker) zaten anon key ile çekip sorunsuz alıyoruz.
      const r = await fetch(SUPA_URL+'/rest/v1/works?select=*&order=id&limit=2000', {
        headers: {'apikey': SUPA_KEY, 'Authorization': 'Bearer '+SUPA_KEY},
        signal: AbortSignal.timeout(3500)
      });
      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)
          });
        }
        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)
}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;
      // repertoires.js'deki renderList ile BİREBİR aynı görünürlük: ya kendi repertuvarın,
      // ya da başkasına ait AMA açıkça "public" işaretli VE gizlenmemiş olmalı.
      // Grup içindeki private (is_public=false) repertuvarlar, sahibi olmayanlara hiç gösterilmez.
      return isOwner || (x.is_public === true && !hiddenIds.includes(x.id));
    })
    .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||''}))}));
}

// repertoires.js ile AYNI görünürlük kapsamı — ikisi farklı mantık kullanırsa
// (biri grup bazlı, diğeri owner/public bazlı) iki sayfa farklı repertuvar listeleri gösterir.
function repVisibilityFilterFn() {
  const uid = getUserId();
  const gid = (typeof getGroupId === 'function') ? getGroupId() : null;
  if (gid) {
    return (x) => x.owner_id === uid || x.user_id === uid || x.group_id === gid || x.is_public === true;
  }
  return (x) => x.owner_id === uid || x.user_id === uid || x.is_public === true;
}
function repVisibilityQuery() {
  const uid = getUserId();
  const gid = (typeof getGroupId === 'function') ? getGroupId() : null;
  return gid
    ? 'or=(owner_id.eq.' + uid + ',group_id.eq.' + gid + ',is_public.eq.true)'
    : 'or=(owner_id.eq.' + uid + ',is_public.eq.true)';
}

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(),{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);">"'+stageSearchQuery+'" için sonuç bulunamadı</div>';return;}
  const sl={concept:'Taslak',confirmed:'Onaylandı',archive:'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('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('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);
  });
}

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);
}
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
};
function parseKararNote(s){
  const k = (s||'').toString().trim().toLowerCase().replace(/\s+/g,'').replace('♭','b').replace('♯','#');
  return (k in _KARAR_IN) ? _KARAR_IN[k] : null;
}
function kararLabel(closingNote, n){
  const i = parseKararNote(closingNote);
  if (i === null) return null;
  const j = ((i + (n||0)) % 12 + 12) % 12;
  return _KARAR_LATIN[j] + ' (' + _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);
}
// 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>';
    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></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]);
      html += `<span class="cp-seg"><span class="cp-chord">${chord}</span><span class="cp-lyric">${lyric === '' ? '&nbsp;' : lyric}</span></span>`;
    }
    html += '</div>';
    return html;
  }).join('');
}


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('');}
  else pds.innerHTML='';
  // Info paneli güncelle
  const panel = document.getElementById('stageInfoPanel');
  if (panel) {
    const rows = [
      w.makam ? `<div class="sip-row"><span class="sip-label">Makam</span><span class="sip-val">${w.makam}</span></div>` : '',
      (item.closingNote||w.closingNote) ? `<div class="sip-row"><span class="sip-label">Kapanış</span><span class="sip-val">${item.closingNote||w.closingNote}</span></div>` : '',
      w.tuning ? `<div class="sip-row"><span class="sip-label">Akort</span><span class="sip-val">${w.tuning}</span></div>` : '',
      w.form ? `<div class="sip-row"><span class="sip-label">Form</span><span class="sip-val">${w.form}</span></div>` : '',
      w.measurement ? `<div class="sip-row"><span class="sip-label">Usul</span><span class="sip-val">${w.measurement}</span></div>` : '',
      w.region ? `<div class="sip-row"><span class="sip-label">Bölge</span><span class="sip-val">${w.region}</span></div>` : '',
      w.composer ? `<div class="sip-row"><span class="sip-label">Besteci</span><span class="sip-val">${w.composer}</span></div>` : '',
      w.lyricWriter ? `<div class="sip-row"><span class="sip-label">Güfte</span><span class="sip-val">${w.lyricWriter}</span></div>` : '',
      w.instrument ? `<div class="sip-row"><span class="sip-label">Enstrüman</span><span class="sip-val">${w.instrument}</span></div>` : '',
      item.note ? `<div class="sip-row"><span class="sip-label">Not</span><span class="sip-val">${item.note}</span></div>` : '',
    ].filter(Boolean).join('');
    panel.innerHTML = rows || '<div style="color:var(--text3);font-size:12px;">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) {
    bodyHtml = `<div class="wlyrics">${renderStageChords(transposeChordPro(w.chords, getTranspose(item.workId)))}</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) ? 'Orijinal karar: ' + kararLabel(_cn,0) : ''}">Karar: ${_kl || _cn}${(!_kl && _kt) ? ' (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}`;
  document.getElementById('sm').innerHTML = bodyHtml;
  if (viewMode === 'nota') notaPreloadNext(stageNotaPages(w), _notaPage);
  updateViewToggleUI(w);
  // Kaydedilmiş hizalamayı uygula
  const savedAlign = localStorage.getItem('stageLyricsAlign') || 'center';
  requestAnimationFrame(() => setLyricsAlign(savedAlign));
  const savedScale = parseFloat(localStorage.getItem('stageLyricsScale')) || 1;
  document.documentElement.style.setProperty('--lyrics-scale', savedScale);
  updateFontSliderUI(savedScale);
  // ── 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 : '…');
    document.getElementById('nm').textContent=[nw.makam,nw.measurement,next.closingNote||nw.closingNote].filter(Boolean).join(' · ');
    // 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 ? '🔗 POTPURİ — DEVAMI' : 'Sıradaki';
    np.style.display='block';
  }
  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="Ö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="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: 'Eserler', repertoires: 'Repertuvarlar', index: 'Ana Sayfa', artiesten: 'Solistler', uyeler: 'Üyeler', ayarlar: 'Ayarlar' };
    const lbl = backBtn.querySelector('.v2-bn-label');
    if (lbl) lbl.textContent = labels[src] || '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;
  const themeBtn = `<button onclick="event.stopPropagation();toggleStageTheme()" id="stageThemeBtn2" title="Gece/Gündüz" class="align-btn"><i class="ti ti-sun"></i></button>`;
  const navBtn = `<button onclick="event.stopPropagation();openStageNav()" title="Navigasyon" class="align-btn" style="color:var(--accent);border-color:var(--accent);"><i class="ti ti-list"></i></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);
  const tonBtns = (_hasChords && mode !== 'nota') ? `
      <button onclick="event.stopPropagation();stepTranspose(-1)" title="Yarım ton pes" class="align-btn"><i class="ti ti-minus"></i></button>
      <button onclick="event.stopPropagation();resetTranspose()" id="tonBadge" title="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="Yarım ton tiz" class="align-btn"><i class="ti ti-plus"></i></button>
      ${(() => {
        const cn = (item && (item.closingNote || (WL[String(item.workId)]||{}).closingNote)) || '';
        const cur = kararLabel(cn, tVal);
        if (cur) {
          const orig = tVal ? kararLabel(cn, 0) : '';
          return `<span class="ton-karar" title="${orig?('Orijinal karar: '+orig):''}" style="font-size:11px;font-weight:700;white-space:nowrap;padding:0 6px;color:${tVal?'var(--accent)':'var(--text2, #9aa4b2)'};">${cur}</span>`;
        }
        return cn ? `<span class="ton-karar" style="font-size:11px;white-space:nowrap;padding:0 6px;color:var(--text3, #6b7482);">${cn}</span>` : '';
      })()}` : '';
  if (mode === 'nota') {
    row.innerHTML = themeBtn + navBtn;
  } 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="Sola Yasla" class="align-btn"><i class="ti ti-align-left"></i></button>
      <button onclick="event.stopPropagation();setLyricsAlign('center')" id="alignCenter" title="Ortala" class="align-btn"><i class="ti ti-align-center"></i></button>
      <button onclick="event.stopPropagation();setLyricsAlign('right')" id="alignRight" title="Sağa Yasla" class="align-btn"><i class="ti ti-align-right"></i></button>`;
    row.innerHTML = alignBtns + tonBtns + themeBtn + navBtn;
  }
}

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');
}

function exitStage(e){e.stopPropagation();if(confirm('Sahne modundan çıkmak istiyor musunuz?')){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 = (curRep.items||[]).length + ' eser seslendirdiniz';
  // 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||'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){
  ['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');
}

document.addEventListener('keydown',e=>{
  if(document.getElementById('stageScreen').classList.contains('hidden'))return;
  if(e.key==='ArrowRight'||e.key===' '||e.key==='ArrowDown'){e.preventDefault();nextWork();}
  if(e.key==='ArrowLeft'||e.key==='ArrowUp'){e.preventDefault();prevWork();}
  if(e.key==='Escape')exitStage({stopPropagation:()=>{}});
});

// 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);
}
document.addEventListener('touchstart',e=>{
  if(document.getElementById('stageScreen').classList.contains('hidden'))return;
  txStart=e.touches[0].clientX;
  tyStart=e.touches[0].clientY;
},{passive:true});
document.addEventListener('touchend',e=>{
  if(document.getElementById('stageScreen').classList.contains('hidden'))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));
      // Supabase'den bu repertuvarı çek (public erişim)
      const [rRes, iRes] = await Promise.all([
        fetch(SUPA_URL+'/rest/v1/repertoires?id=eq.'+repId, {
          headers: {'apikey': SUPA_KEY, 'Authorization': 'Bearer '+SUPA_KEY}
        }),
        fetch(SUPA_URL+'/rest/v1/repertoire_items?repertoire_id=eq.'+repId+'&order=seq', {
          headers: {'apikey': SUPA_KEY, 'Authorization': 'Bearer '+SUPA_KEY}
        })
      ]);
      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 || '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();
  showScreen('pickerScreen');
  renderPicker();
  setTheme(localStorage.getItem('stageTheme')||'night');
  initBackBtn();

  const autoId=localStorage.getItem('stageRepId');
  if(autoId){localStorage.removeItem('stageRepId');const f=reps.find(r=>r.id===autoId);if(f){pickRep(autoId);setTimeout(()=>{startStage();initBackBtn();},100);}}
})();

// ── MOBİL SWIPE DESTEĞİ ──
(function() {
  let touchStartX = 0, touchStartY = 0;
  const sm = document.getElementById('sm') || document.body;
  
  document.addEventListener('touchstart', function(e) {
    touchStartX = e.touches[0].clientX;
    touchStartY = e.touches[0].clientY;
  }, {passive: true});

  document.addEventListener('touchend', function(e) {
    if (!document.getElementById('stageScreen') || 
        document.getElementById('stageScreen').classList.contains('hidden')) return;
    
    const dx = e.changedTouches[0].clientX - touchStartX;
    const dy = e.changedTouches[0].clientY - touchStartY;
    
    // Yalnızca yatay swipe (dikey scroll değil)
    if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
      if (dx < 0) sideNavNext(); // sola swipe → sonraki
      else sideNavPrev();         // sağa swipe → önceki
    }
  }, {passive: true});
})();

</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">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">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">Çı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);
})();

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