/* coach page — 13 tem redesign (damla'nın emri): pembe zemin üstünde BEYAZ
   yumuşak kartlar, kocaman başlık, gerçek butonlar, mecburi ayar adımı.
   arial ve site dili aynı kalır. */

/* coach sayfası da gövde genişlik kuralını kullanır (styles.css) - ortaya sıkışmaz */

/* kocaman başlık */
.pt-title { font-size: clamp(40px, 7vw, 76px); letter-spacing: -0.02em; line-height: 1.05; margin: 6px 0 2px; }

/* iki kolon: solda program kur, sağda kamera + canlı sayılar. kartlar kolonu doldurur. */
.coach-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; margin-top: 6px; }
.coach-main .card, .coach-main .stage { max-width: none; margin: 0 0 14px; }
.setup, .live { min-width: 0; }
.coach-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 6px; }
.coach-foot .card { max-width: none; margin: 10px 0; }
@media (max-width: 860px) {
  .coach-main, .coach-foot { grid-template-columns: 1fr; }
}

/* beyaz yumuşak kart - sayfanın yapı taşı (pembe-tonlu gölge = premium) */
.card { background: var(--card); border-radius: var(--r); padding: 18px 22px; max-width: 560px; margin: 12px 0; box-shadow: var(--sh-2); }
.card-title { font-size: 12px; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cherry); margin: 0 0 10px; }

/* onboarding: işte motorumuz */
.intro-big { font-size: 22px; font-weight: bold; margin: 0 0 6px; }
.intro p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.intro-steps { color: #7a0a24; font-size: 13px; margin-bottom: 0 !important; }

/* butonlar: vişne dolgu, yumuşak gölge, basınca hafif iner (premium his) */
.mainbtn { font-family: inherit; font-size: 16px; font-weight: bold; color: var(--on-cherry); background: var(--cherry); border: none; border-radius: var(--r-sm); padding: 11px 20px; cursor: pointer; margin: 8px 12px 2px 0; box-shadow: var(--sh-btn); transition: transform var(--t), background var(--t), box-shadow var(--t); }
.mainbtn:hover { background: var(--cherry-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(142,0,56,.32); }
.mainbtn:active { transform: translateY(0); box-shadow: var(--sh-btn); }
.mainbtn:disabled { opacity: 0.45; cursor: default; box-shadow: none; transform: none; }
.mainbtn.soft { background: var(--tint); color: var(--cherry); box-shadow: var(--sh-1); }
.mainbtn.soft:hover { background: var(--tint-2); }

/* sahne: video düz köşeli, çerçevesiz (Damla: yuvarlak köşe istenmedi) */
.stage { position: relative; width: 100%; max-width: 560px; margin: 16px 0 12px; background: #000; min-height: 60px; overflow: hidden; box-shadow: var(--sh-2); }
#cam, #overlay { width: 100%; display: block; }
#cam { transform: scaleX(-1); }                    /* ayna hissi - antrenman doğal olsun */
#overlay { position: absolute; inset: 0; transform: scaleX(-1); }

/* ── KAMERA AÇIK: video sahnenin ortasında, kocaman. kurulum çekilir. ── */
body.running .coach-main { display: block; }
body.running #wip-moves { display: none; }
body.running .setup { max-width: 900px; margin: 0 auto; text-align: center; }
body.running .setup .safety { max-width: 640px; margin: 0 auto 8px; }
body.running .live { max-width: 900px; margin: 0 auto; }
body.running .stage { max-width: 900px; margin: 4px auto 16px; }

body.running .read.card { max-width: 640px; margin: 0 auto; text-align: left; }
body.running #intro, body.running #progCard { display: none; }

/* hareket seçici + plan - beyaz kartın içinde beyaz kutular, ince pembe kenar */
.move-row { margin: 2px 0 8px; }
.move-row label { font-size: 12px; opacity: 0.7; margin-right: 8px; }
#moveSel { font-family: inherit; font-size: 16px; font-weight: bold; color: #33000E; background: #fff; border: none; box-shadow: 0 1px 5px rgba(51, 0, 14, 0.12); border-radius: 12px; padding: 6px 12px; cursor: pointer; }

.prog-lead { font-size: 13px; opacity: 0.75; margin: 0 0 8px; line-height: 1.5; }
.prog-list { margin: 2px 0 10px; }
.prog-item { font-size: 15px; font-weight: bold; line-height: 2; color: #33000E; }
.prog-item .mini { font-weight: normal; }
.prog-empty { font-size: 13px; opacity: 0.6; padding: 2px 0 4px; }
.plan-row { margin: 4px 0 2px; font-size: 13px; line-height: 2.1; }
.plan-lead { opacity: 0.7; margin-right: 6px; }
.plan-num { font-family: inherit; font-size: 15px; font-weight: bold; color: #33000E; background: #fff; border: none; box-shadow: 0 1px 5px rgba(51, 0, 14, 0.12); border-radius: 12px; width: 48px; padding: 5px 6px; text-align: center; margin: 0 3px; -moz-appearance: textfield; }
.plan-num::-webkit-outer-spin-button, .plan-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plan-row label { opacity: 0.7; margin-right: 2px; }
.plan-x { opacity: 0.55; margin: 0 3px; }
.plan-hint { display: block; font-size: 11px; opacity: 0.55; margin-top: 2px; }

#startWrap[hidden] { display: none; }
.status { margin: 8px 0; min-height: 20px; max-width: 560px; }

/* hesap barı - beyaz kartta, girişler beyaz + ince pembe kenar */
.authbar { font-size: 13px; }
.auth-who { opacity: 0.8; margin-right: 10px; }
.auth-lead { opacity: 0.75; margin: 0 0 6px; }
.auth-in { font-family: inherit; font-size: 15px; color: #33000E; background: #fff; border: none; box-shadow: 0 1px 5px rgba(51, 0, 14, 0.12); border-radius: 12px; padding: 8px 10px; margin: 0 6px 6px 0; width: 200px; max-width: 60%; }
.auth-in::placeholder { color: #7a0a24; opacity: 0.6; }
.auth-btn, .auth-link { font-family: inherit; font-size: 14px; font-weight: bold; color: #A61B42; background: none; border: none; cursor: pointer; padding: 6px 0; margin-right: 14px; }
.auth-msg { min-height: 16px; color: #7a0a24; margin: 4px 0 0; }
.auth-priv { font-size: 11px; opacity: 0.6; margin: 4px 0 0; max-width: 520px; }
.auth-priv a { color: #7a0a24; }
.auth-in:focus-visible, .auth-btn:focus-visible, .auth-link:focus-visible { outline: 2px solid #33000E; outline-offset: 2px; }

/* canlı okuma paneli - beyaz kart */
.read[hidden] { display: none; }

/* tekrar sayacı - sayfadaki en büyük şey, motorun "gerçek" anı */
.rep-row { line-height: 1; margin: 4px 0 2px; }
.rep-count { font-size: 72px; font-weight: bold; color: #A61B42; letter-spacing: -0.02em; display: inline-block; }
.rep-count.ticked { animation: repPop 0.22s ease-out; }
.rep-label { font-size: 14px; margin-left: 8px; opacity: 0.7; }
@keyframes repPop { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.half-note { font-size: 12px; color: #7a0a24; min-height: 16px; margin-bottom: 2px; }
.score-line { font-size: 13px; min-height: 18px; margin-bottom: 6px; }
.score-line .big { font-weight: bold; color: #A61B42; }
/* faz 3: motorun tekrar yorumu - koc cumlesi, tekrar sayilinca ~4 sn gorunur */
.rep-comment { font-size: 15px; color: #33000E; min-height: 20px; margin-bottom: 4px; }

/* set ilerlemesi - sayaç üstünde küçük bir satır */
.set-line { font-size: 13px; font-weight: bold; color: #7a0a24; margin: 2px 0 4px; }
.set-line[hidden] { display: none; }

/* dinlenme - sayacın yerini alan sakin blok */
.rest[hidden] { display: none; }
.rest { margin: 6px 0 10px; }
.rest-word { font-size: 20px; opacity: 0.7; }
.rest-count { font-size: 72px; font-weight: bold; color: #A61B42; line-height: 1; letter-spacing: -0.02em; }
.rest-sub { font-size: 13px; opacity: 0.75; margin: 2px 0 8px; }
.restbtn { font-family: inherit; font-size: 16px; font-weight: bold; color: #A61B42; background: #FFE3EE; border: none; border-radius: 10px; padding: 8px 14px; cursor: pointer; }

/* seans özeti */
.summary[hidden] { display: none; }
.summary-title { font-size: 26px; font-weight: bold; color: #A61B42; letter-spacing: -0.01em; }
.summary-body { font-size: 15px; line-height: 1.7; margin-top: 4px; }
.summary-body div { padding: 1px 0; }

/* ilk kullanım onayı */
.consent[hidden] { display: none; }
.consent p { font-size: 15px; line-height: 1.6; color: #33000E; margin: 0 0 6px; }
.consent a { color: #7a0a24; }

/* geçmiş */
.history[hidden] { display: none; }
.history-title { font-size: 20px; font-weight: bold; color: #A61B42; letter-spacing: -0.01em; }
.history-list { font-size: 14px; line-height: 1.8; margin-top: 4px; color: #33000E; }
.hist-empty { color: #7a0a24; }

.phase-word { font-size: 34px; font-weight: bold; letter-spacing: -0.01em; line-height: 1.1; }
.sub { font-size: 13px; opacity: 0.85; margin-top: 2px; }

/* ölçer barları - yumuşak pembe track, vişne dolgu, hap köşe */
.meter { margin: 12px 0 2px; }
.meter-label { font-size: 11px; opacity: 0.7; margin-bottom: 3px; }
.bar { position: relative; width: 100%; max-width: 360px; height: 10px; background: #FFE3EE; border-radius: 999px; overflow: hidden; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #A61B42; transition: width 0.08s linear; }
.bar.conf .bar-fill { background: #33000E; }

/* altı eklem açısı - ham vs yumuşatılmış farkı */
.angles { margin-top: 14px; font-size: 12.5px; }
.angles div { padding: 1px 0; }
.angles .k { display: inline-block; width: 130px; opacity: 0.7; }

.fps { font-size: 11px; opacity: 0.55; margin-top: 10px; }
.msg { margin: 6px 0; min-height: 18px; color: #7a0a24; }
/* yarım tekrar = koç sesi: büyük, kırmızı, kısa bir nabız */
.msg.loud { font-size: 21px; font-weight: bold; color: #A61B42; line-height: 1.2; animation: cuePulse 0.3s ease-out; }
@keyframes cuePulse { 0% { transform: scale(0.9); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msg.loud { animation: none; } }

.safety { font-size: 12px; color: #7a0a24; opacity: 0.85; margin: 6px 0 2px; max-width: 560px; }
.private { font-size: 12px; opacity: 0.75; margin-top: 4px; max-width: 560px; }
.wip { font-size: 12px; opacity: 0.75; margin-top: 22px; max-width: 560px; }

/* erişilebilirlik: görünür odak; hareket hassasiyeti olana sakin. */
#moveSel:focus-visible, .mainbtn:focus-visible, .restbtn:focus-visible, .plan-num:focus-visible {
  outline: 2px solid #33000E; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .rep-count.ticked { animation: none; }
  .bar-fill { transition: none; }
}


/* ── marquee dönüşümü (14 tem): fiş + presetler + tabela kontrolleri ── */
/* set listesi FİŞİ: eğik, tırtıklı, sürüklenir - Damla'nın bayıldığı mekanik */
.receipt { position: absolute; left: 4%; top: 56px; width: 264px; background: #fff; color: var(--cherry); font-family: "Courier New", Courier, monospace; font-size: 12.5px; padding: 20px 16px 22px; transform: rotate(-4deg); cursor: grab; box-shadow: 0 14px 26px rgba(51,0,14,.32); z-index: 30; touch-action: none;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 8px),95% 100%,90% calc(100% - 8px),85% 100%,80% calc(100% - 8px),75% 100%,70% calc(100% - 8px),65% 100%,60% calc(100% - 8px),55% 100%,50% calc(100% - 8px),45% 100%,40% calc(100% - 8px),35% 100%,30% calc(100% - 8px),25% 100%,20% calc(100% - 8px),15% 100%,10% calc(100% - 8px),5% 100%,0 calc(100% - 8px)); }
.receipt[hidden] { display: none; }
.receipt.dragging { cursor: grabbing; box-shadow: 0 24px 44px rgba(51,0,14,.4); }
.receipt .rhead { text-align: center; margin-bottom: 8px; letter-spacing: .08em; }
.receipt .rhead b { font-size: 15px; }
.receipt .rdrag { font-size: 10px; opacity: .7; }
.receipt .rclose { position: absolute; top: 4px; right: 6px; background: none; border: none; color: var(--cherry); font: bold 14px Arial; cursor: pointer; padding: 2px 6px; }
.receipt .rrule { border-top: 2px dashed var(--tint-2); margin: 8px 0; }
.receipt .rline { display: flex; justify-content: space-between; gap: 8px; padding: 2.5px 0; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.receipt .rline.printed { opacity: 1; transform: none; }
.receipt .rline:hover { text-decoration: line-through; }
.receipt .rline.nowplaying { font-weight: bold; }
.receipt .rline.nowplaying::before { content: "▸ "; }
.receipt .rline .dots { flex: 1; overflow: hidden; white-space: nowrap; opacity: .45; }
.receipt .rtotal { display: flex; justify-content: space-between; font-weight: bold; font-size: 14px; }
.receipt .rnote { text-align: center; font-size: 10.5px; margin-top: 8px; line-height: 1.5; opacity: .8; }
.receipt .rempty { font-size: 11px; text-align: center; opacity: .75; padding: 4px 0; margin: 0; }
.receipt-tab { position: fixed; right: 3vw; top: 130px; font: bold 12px Arial; background: #fff; color: var(--cherry); border: none; padding: 9px 13px; cursor: pointer; transform: rotate(-3deg); box-shadow: 0 6px 12px rgba(51,0,14,.25); z-index: 30; }
.receipt-tab[hidden] { display: none; }
@media (max-width: 700px) { .receipt { width: 220px; right: 2vw; top: auto; bottom: 16px; } .receipt-tab { top: auto; bottom: 16px; } }

/* hazır programlar */
.preset-row { margin: 2px 0 10px; }
.presetbtn { font: bold 13px Arial; background: var(--tint); color: var(--cherry); border: none; border-radius: 10px; padding: 9px 14px; margin: 0 8px 8px 0; cursor: pointer; box-shadow: var(--sh-1); transition: transform .15s, background .15s, color .15s; }
.presetbtn:hover { background: var(--cherry); color: var(--on-cherry); transform: translateY(-1px); }

/* tabela altında sayfa nefes alsın */
.backstage { margin-bottom: 20px; }


/* ── marquee birebir (mockups/o-marquee.html = kontrat, Damla evet 15 tem) ── */
/* tabela ici: programlar + fise-direkt arama */
.pickband { margin-top: 14px; }
.pickband .plbl { font-size: 11px; font-weight: bold; letter-spacing: .13em; opacity: .85; margin-bottom: 8px; }
.pickband .plbl-gap { margin-top: 10px; }
.pickband button { font: bold 13px Arial, Helvetica, sans-serif; background: var(--cherry-deep); color: var(--on-cherry); border: none; border-radius: 10px; padding: 9px 14px; margin: 0 8px 8px 0; cursor: pointer; transition: transform .15s, background .15s, color .15s; }
.pickband button:hover { background: var(--on-cherry); color: var(--cherry); transform: translateY(-1px); }
/* playlist chipleri preset chiplerle ayni gorunur (Damla: ayri cerceve gerek yok) */
.tsw { position: relative; display: inline-block; width: min(360px, 100%); }
.tsw input { width: 100%; font: 13.5px Arial, Helvetica, sans-serif; color: var(--ink); background: var(--on-cherry); border: none; border-radius: 10px; padding: 10px 38px 10px 14px; outline: none; }
.tsw input::placeholder { color: var(--ink-soft); opacity: .7; }
.tsw .tmag { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; pointer-events: none; opacity: .75; }
.tsuggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--on-cherry); color: var(--cherry); box-shadow: 0 12px 24px rgba(51,0,14,.3); display: none; z-index: 20; max-height: 240px; overflow-y: auto; border-radius: 10px; }
.tsuggest.open { display: block; }
.tsuggest .tr { display: flex; justify-content: space-between; gap: 10px; padding: 9px 13px; font-size: 13px; font-weight: bold; cursor: pointer; border-bottom: 1px solid var(--tint); }
.tsuggest .tr:hover { background: var(--tint); }
.tsuggest .tr small { font-weight: normal; color: var(--ink-soft); }

/* sahne kati: kamera burada acilir, fis solda */
.stagefloor { position: relative; margin: 0 4vw 24px; background: var(--tint); padding: 28px 4vw 36px; min-height: 520px; }
.camstage { background: var(--cherry-deep); color: var(--on-cherry); width: min(720px, 86%); aspect-ratio: 4 / 3; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; font-size: 13px; box-shadow: 0 16px 30px rgba(51,0,14,.3); cursor: pointer; }
.camstage .cam { font-size: 38px; }
.camstage b { font-size: 16px; }
.camstage .stagestart { font: bold 14px Arial, Helvetica, sans-serif; background: var(--on-cherry); color: var(--cherry); border: none; border-radius: 10px; padding: 11px 20px; margin-top: 10px; cursor: pointer; box-shadow: var(--sh-btn); }
.camstage .stagestart:hover { transform: translateY(-1px); }
.stagefloor .stage, .stagefloor .card, .stagefloor #startWrap, .stagefloor .status { margin-left: auto; margin-right: auto; }
.stagefloor .stage { max-width: min(720px, 86%); }
.stagefloor #startWrap, .stagefloor .status { max-width: min(720px, 86%); text-align: center; }

/* arama onerileri tabelanin disina tasabilsin - sub-sign'in overflow:hidden'i
   dropdown'i kirpiyordu (tente kendi overflow'unu zaten kendisi kirpar) */
.sub-sign.backstage { overflow: visible; }
.tsuggest { z-index: 40; }

/* sahne kutusundaki canli durum: yuklenirken olu gorunmesin, hata da BURADA konussun */
.camstage .stagestatus { font-size: 13px; min-height: 18px; max-width: 85%; opacity: .95; }
.camstage.warming .stagestart { display: none; }
.camstage.warming .cam { animation: ggspin 1.6s linear infinite; display: inline-block; }
@keyframes ggspin { to { transform: rotate(360deg); } }