
/* Lufga — noqt marka başlık fontu; Google Fonts'ta yok, dosyaya gömülü */
@font-face{font-family:'Lufga';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/LufgaBold.ttf) format('truetype')}
@font-face{font-family:'Lufga';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/LufgaMedium.ttf) format('truetype')}

/* noqt Social açık tema token'ları — eventmatch/lib/theme/app_theme.dart ile birebir */
:root{
  --bg:#F4F8FC; --surface:#FFFFFF; --elev:#F0F5FA; --outline:#EDF1F6; --outline-2:#DDE4EE;
  --text:#14171F; --text-2:#6B7280; --text-3:#9CA3AF;
  --lime:#D6F84C; --lime-2:#BFE22E; --lime-soft:#F6FCD6; --on-lime:#14171F;
  --ok:#34C77B; --bad:#FF5C5C; --warn:#FFC44D;
  --r-card:22px; --r-md:12px; --r-pill:999px;
  --shadow:0 6px 24px rgba(20,23,31,.06),0 1px 2px rgba(20,23,31,.04);
  --head:'Lufga','Inter',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:clamp(15px,1.2vw,21px);line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}

#deck{position:fixed;inset:0;overflow:hidden}
.slide{position:absolute;inset:0;padding:clamp(26px,4.5vw,80px) clamp(26px,6vw,110px);display:grid;grid-template-rows:auto 1fr auto;gap:clamp(12px,2vh,26px);
  opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s}
.slide.active{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* Konu başlığı — Lufga, büyük; sunumu yapan kişi konuyu buradan okur */
.eyebrow{display:flex;align-items:baseline;gap:.7em;font-family:var(--head);font-weight:700;font-size:clamp(22px,2.3vw,36px);letter-spacing:-.02em;color:var(--text)}
.eyebrow::before{content:"";width:.8em;height:.3em;border-radius:var(--r-pill);background:var(--lime);align-self:center}
.eyebrow .dim{color:var(--text-3);font-weight:500;font-family:var(--body);font-size:.5em;letter-spacing:0}
/* noqt logosu — beyaz siluet PNG, brightness(0) ile siyaha boyanır */
.logo{display:inline-block;width:3.2em;height:.91em;background:url(logo-noqt.png) no-repeat center/contain;filter:brightness(0);vertical-align:middle}
.foot .logo{width:2.6em;height:.74em;margin-right:.6em}
.wordmark .logo{width:2.1em;height:.6em;filter:brightness(0);transform:translateY(-.02em)}
.body{min-height:0;display:grid;align-content:center}
.foot{font-size:.72em;color:var(--text-3);display:flex;justify-content:space-between;font-weight:500}

h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(46px,7.4vw,132px);letter-spacing:-.03em}
h2{font-size:clamp(32px,4.4vw,72px)}
h3{font-size:clamp(20px,2.2vw,34px)}
mark{background:linear-gradient(transparent 38%,var(--lime) 38%,var(--lime) 92%,transparent 92%);color:inherit;padding:0 .08em}
.lede{font-size:clamp(16px,1.5vw,26px);color:var(--text-2);max-width:30em;line-height:1.45}
.small{font-size:.8em;color:var(--text-3)}
.num{font-variant-numeric:tabular-nums}
p+p{margin-top:.7em}

.two{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,5vw,90px);align-items:center;min-height:0}
.stack{display:grid;gap:clamp(12px,1.5vh,22px);align-content:center}
.cards{display:grid;gap:clamp(10px,1.1vw,16px)}
.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border-radius:var(--r-card);padding:clamp(14px,1.5vw,24px);box-shadow:var(--shadow);display:grid;gap:.35em;align-content:start}
.card h4{font-family:var(--head);font-weight:700;font-size:1.02em;letter-spacing:-.01em}
.card .k{font-size:.7em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.card p{color:var(--text-2);font-size:.9em}
.card.hot{background:var(--lime-soft);box-shadow:none;border:1.5px solid var(--lime)}
.card.hot .k{color:var(--text)}

.trick{display:grid;grid-template-columns:auto 1fr;gap:1em;align-items:start;background:var(--surface);border-radius:var(--r-md);padding:.9em 1.1em;box-shadow:var(--shadow);border-left:6px solid var(--lime)}
.trick .tag{font-size:.68em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding-top:.35em;white-space:nowrap}
.trick b{font-weight:700}

ul.list{list-style:none;display:grid;gap:.55em}
ul.list li{position:relative;padding-left:1.3em;color:var(--text-2)}
ul.list li::before{content:"";position:absolute;left:0;top:.5em;width:.5em;height:.5em;border-radius:50%;background:var(--lime);box-shadow:0 0 0 2px var(--on-lime) inset}
ul.list li b{color:var(--text);font-weight:600}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.slide.active [data-reveal]{opacity:1;transform:none}
.slide.active [data-reveal]:nth-child(1){transition-delay:.08s}.slide.active [data-reveal]:nth-child(2){transition-delay:.16s}
.slide.active [data-reveal]:nth-child(3){transition-delay:.24s}.slide.active [data-reveal]:nth-child(4){transition-delay:.32s}
.slide.active [data-reveal]:nth-child(5){transition-delay:.4s}.slide.active [data-reveal]:nth-child(6){transition-delay:.48s}
.slide.active [data-reveal]:nth-child(7){transition-delay:.56s}.slide.active [data-reveal]:nth-child(8){transition-delay:.64s}

#progress{position:fixed;left:0;bottom:0;height:5px;background:var(--lime);width:0;transition:width .4s var(--ease);z-index:20}
#hud{position:fixed;right:clamp(16px,2vw,34px);top:clamp(14px,2vh,26px);z-index:20;display:flex;gap:.5em;align-items:center;font-size:.72em;color:var(--text-3);font-weight:500}
#hud button{padding:.4em .8em;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow);color:var(--text)}
#hud button:hover{background:var(--lime)}
#hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);font-size:.68em;color:var(--text-3);z-index:20;transition:opacity 1s;font-weight:500}
#hint.hide{opacity:0}
#overview{position:fixed;inset:0;background:rgba(244,248,252,.97);z-index:30;display:none;padding:clamp(24px,4vw,60px);overflow:auto}
#overview.open{display:block}
#overview h3{margin-bottom:.8em}
#overview .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
#overview button{text-align:left;background:var(--surface);border-radius:var(--r-md);padding:.8em 1em;display:grid;gap:.2em;box-shadow:var(--shadow)}
#overview button:hover{background:var(--lime-soft)}
#overview .n{font-size:.7em;color:var(--text-3);font-weight:600}
#overview .t{font-size:.9em;font-weight:600}
#overview .blk{grid-column:1/-1;font-size:.7em;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:1em;font-weight:700}

/* kapak */
.cover{grid-template-rows:auto 1fr auto}
.cover canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.cover .meta{display:flex;gap:2.5em;font-size:.82em;color:var(--text-2)}
.cover .meta b{color:var(--text);display:block;font-family:var(--head);font-size:1.25em}
.wordmark{font-family:var(--head);font-weight:700;letter-spacing:-.04em;display:inline-flex;align-items:baseline;gap:.25em}
.wordmark span{background:var(--lime);border-radius:var(--r-pill);padding:.05em .45em;font-size:.42em;letter-spacing:.06em;transform:translateY(-.45em)}

/* blok kapağı */
.block{background:var(--bg)}
.block .bn{font-family:var(--head);font-weight:700;font-size:clamp(140px,26vw,420px);line-height:.8;color:var(--lime);position:absolute;right:3vw;bottom:-2vw;pointer-events:none;letter-spacing:-.06em}
.block .goals{display:grid;gap:.5em;max-width:34em;color:var(--text-2)}
.block .goals div{display:grid;grid-template-columns:auto 1fr;gap:.8em}
.block .goals span{font-weight:700;color:var(--text)}

.agenda{display:grid;gap:8px}
.agenda .row{display:grid;grid-template-columns:4.5em 1fr auto;gap:1.4em;align-items:center;padding:.75em 1.1em;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow)}
.agenda .row.brk{background:transparent;box-shadow:none;border:1.5px dashed var(--outline-2);color:var(--text-3)}
.agenda .t{font-weight:700}.agenda .d{color:var(--text-3);font-size:.82em;font-weight:500}

/* ses oynatıcı */
.audio{display:inline-grid;grid-template-columns:auto 1fr auto;gap:.8em;align-items:center;border-radius:var(--r-pill);padding:.4em .9em .4em .4em;background:var(--surface);box-shadow:var(--shadow);font-size:.86em;min-width:15em}
.audio .pb{width:2.3em;height:2.3em;border-radius:50%;background:var(--lime);color:var(--on-lime);display:grid;place-items:center;position:relative}
.audio .pb svg{width:1em;height:1em;fill:currentColor}
.audio .pb .ring{position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(var(--text) var(--p,0%),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0)}
.audio .lbl{display:grid;line-height:1.2;font-weight:600}.audio .lbl small{font-size:.72em;color:var(--text-3);font-weight:500}
.audio .st{font-size:.7em;color:var(--text-3);font-weight:600}
.audio.missing .pb{background:var(--elev);color:var(--text-3)}
.audio.missing .st{color:var(--bad)}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sgrid .audio{min-width:0;width:100%}
/* kart içindeki küçük oynatıcılar: dosya adı ve süre gizli, sadece ad + buton */
.card .sgrid .audio{grid-template-columns:auto 1fr;padding:.3em .7em .3em .3em}
.card .sgrid .audio small,.card .sgrid .audio .st{display:none}
.card .sgrid .audio .pb{width:2em;height:2em}

/* quiz */
.quiz{display:grid;gap:clamp(10px,1.4vh,18px);max-width:56em}
.quiz .q{font-family:var(--head);font-weight:700;font-size:clamp(22px,2.5vw,38px);line-height:1.15;text-wrap:balance;letter-spacing:-.02em}
.quiz .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz .opt{text-align:left;background:var(--surface);border-radius:var(--r-md);padding:.85em 1.1em;display:grid;grid-template-columns:auto 1fr;gap:.9em;align-items:center;box-shadow:var(--shadow);border:1.5px solid transparent;transition:border-color .2s,background .2s}
.quiz .opt .l{font-weight:700;width:1.5em;height:1.5em;border-radius:50%;background:var(--elev);display:grid;place-items:center;font-size:.8em}
.quiz .opt:hover{border-color:var(--lime)}
.quiz .opt.ok{border-color:var(--ok);background:#EAF9F0}.quiz .opt.ok .l{background:var(--ok);color:#fff}
.quiz .opt.no{border-color:var(--bad);background:#FFF0F0;opacity:.85}.quiz .opt.no .l{background:var(--bad);color:#fff}
.quiz .opt:disabled{cursor:default}
.quiz .why{border-left:6px solid var(--ok);padding:.6em 1em;color:var(--text-2);background:var(--surface);border-radius:var(--r-md);display:none;font-size:.92em;box-shadow:var(--shadow)}
.quiz .why.show{display:block}.quiz .why b{color:var(--text)}
.quiz .nav{display:flex;gap:.8em;align-items:center;font-size:.78em;color:var(--text-3);font-weight:600}
.quiz .nav button{border-radius:var(--r-pill);padding:.45em 1.1em;background:var(--lime);color:var(--on-lime);font-weight:700}
.score{font-family:var(--head);font-size:clamp(56px,8vw,140px);line-height:1;font-weight:700;letter-spacing:-.04em}

/* görseller */
.vis{background:var(--surface);border-radius:var(--r-card);padding:clamp(14px,1.6vw,26px);display:grid;gap:.8em;min-height:0;box-shadow:var(--shadow)}
.vis .cap{font-size:.7em;color:var(--text-3);font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between}
.vis .cap b{color:var(--text)}
canvas.v{width:100%;height:auto;display:block;border-radius:var(--r-md)}

.grid16{display:grid;grid-template-columns:repeat(16,1fr);gap:6px}
.grid16 i{aspect-ratio:1;border-radius:50%;background:var(--elev);display:block;transition:transform .08s,background .08s}
.grid16 i.db{box-shadow:inset 0 0 0 2px var(--text)}
.grid16 i.on{background:var(--lime);transform:scale(1.25)}
.bars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:.68em;color:var(--text-3);text-align:center;font-weight:600}
.phrase{display:flex;gap:.3em;align-items:baseline}
.phrase b{font-family:var(--head);font-size:2.4em;font-weight:700}
.phrase span{color:var(--text-3)}

/* metronom */
.metro{display:grid;gap:.9em}
.metro .bpm{font-family:var(--head);font-size:clamp(56px,7vw,120px);line-height:1;font-weight:700;letter-spacing:-.04em;display:flex;align-items:baseline;gap:.25em}
.metro .bpm small{font-size:.22em;color:var(--text-3);letter-spacing:.08em;font-family:var(--body);font-weight:700}
.metro input[type=range]{width:100%;accent-color:var(--on-lime);height:1.6em}
.metro .row{display:flex;gap:.5em;flex-wrap:wrap;align-items:center}
.btn{border-radius:var(--r-pill);padding:.55em 1.2em;font-weight:700;background:var(--elev);color:var(--text);transition:background .15s}
.btn:hover{background:var(--outline-2)}
.btn.primary{background:var(--lime);color:var(--on-lime)}.btn.primary:hover{background:var(--lime-2)}
.btn.sm{padding:.4em .9em;font-size:.85em}
.dots{display:flex;gap:10px}
.dots i{width:22px;height:22px;border-radius:50%;background:var(--elev);display:block;transition:transform .06s,background .06s}
.dots i:first-child{box-shadow:inset 0 0 0 2px var(--text)}
.dots i.on{background:var(--lime);transform:scale(1.3)}

/* EQ */
.eq{display:grid;grid-template-columns:1fr auto;gap:1.5em;align-items:stretch}
.eq .knobs{display:grid;grid-auto-flow:column;gap:1.2em;align-items:end}
.eq .kn{display:grid;justify-items:center;gap:.4em;font-size:.7em;color:var(--text-3);font-weight:700}
.eq input[type=range]{writing-mode:vertical-lr;direction:rtl;width:1.4em;height:11em;accent-color:var(--on-lime);cursor:pointer}
.eq .kn b{color:var(--text)}

/* cihaz şeması */
.device{display:grid;grid-template-columns:1fr;gap:8px}
.dev-row{display:grid;gap:8px}
.key{background:var(--surface);border-radius:var(--r-md);padding:.55em .7em;box-shadow:var(--shadow);display:grid;gap:.1em;cursor:pointer;border:1.5px solid transparent;transition:border-color .15s,background .15s}
.key:hover,.key.on{border-color:var(--lime);background:var(--lime-soft)}
.key b{font-size:.82em;font-weight:700}.key span{font-size:.72em;color:var(--text-2)}
.jog{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--surface) 0 38%,var(--elev) 39% 100%);box-shadow:var(--shadow);display:grid;place-items:center;font-size:.72em;font-weight:700;color:var(--text-3)}

.tl{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;height:clamp(140px,22vh,250px)}
.tl div{border-radius:10px 10px 4px 4px;background:var(--lime);display:grid;align-content:end;padding:.5em;font-size:.66em;color:var(--on-lime);font-weight:700;transform-origin:bottom;transform:scaleY(0);transition:transform .8s var(--ease)}
.tl div.lo{background:var(--elev);color:var(--text-2)}
.slide.active .tl div{transform:none}
.tl div small{display:block;font-weight:500;opacity:.75}

.check{display:grid;gap:.5em;max-width:34em}
.check label{display:grid;grid-template-columns:auto 1fr;gap:.8em;align-items:center;padding:.55em .9em;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;color:var(--text-2)}
.check input{accent-color:var(--on-lime);width:1.1em;height:1.1em}
.check input:checked+span{color:var(--text);text-decoration:line-through;text-decoration-color:var(--lime);text-decoration-thickness:3px}

table.manifest{border-collapse:collapse;width:100%;font-size:.76em}
table.manifest td,table.manifest th{text-align:left;padding:.4em .6em;border-bottom:1px solid var(--outline);vertical-align:top}
table.manifest th{color:var(--text-3);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.85em}
table.manifest td:first-child{font-weight:600;white-space:nowrap}
table.manifest td:nth-child(2){color:var(--text-3)}
table.manifest td.ok{color:var(--ok);font-weight:700}table.manifest td.no{color:var(--bad);font-weight:700}
.scroll{overflow:auto;max-height:100%;min-height:0}

@media (max-width:900px){.two{grid-template-columns:1fr}.c3,.c4,.sgrid{grid-template-columns:1fr 1fr}.quiz .opts{grid-template-columns:1fr}.block .bn{display:none}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}

/* ---------- ADMIN / DÜZENLEME MODU ---------- */
#adminBar{position:fixed;left:50%;top:clamp(14px,2vh,26px);transform:translateX(-50%);z-index:25;display:none;gap:.5em;align-items:center;background:var(--surface);box-shadow:var(--shadow);border-radius:var(--r-pill);padding:.35em .5em .35em .9em;font-size:.78em;font-weight:600}
#adminBar.on{display:flex}
#adminBar .st{color:var(--text-3);font-weight:500}
#adminBar .st.dirty{color:#B45309}
body.editing [data-edit]{outline:1.5px dashed var(--lime-2);outline-offset:3px;border-radius:4px;cursor:text;min-width:1em}
body.editing [data-edit]:focus{outline:2px solid var(--on-lime);background:var(--lime-soft)}
body.editing .audio{outline:1.5px dashed var(--outline-2);outline-offset:3px}
.audio .up{display:none;margin-left:.4em}
body.editing .audio .up{display:inline-flex}
.audio .up label{cursor:pointer;background:var(--lime);color:var(--on-lime);border-radius:var(--r-pill);padding:.25em .6em;font-size:.75em;font-weight:700}
.audio .up input{display:none}
.slide-tools{position:absolute;right:clamp(26px,6vw,110px);bottom:clamp(14px,2vh,26px);display:none;gap:.4em;z-index:5}
body.editing .slide-tools{display:flex}
.slide-tools button{font-size:.72em;padding:.35em .7em;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow);font-weight:600}
.slide-tools button:hover{background:var(--lime)}
.slide-tools button.danger:hover{background:#FFE1E1}
#toast{position:fixed;left:50%;bottom:56px;transform:translateX(-50%);background:var(--text);color:#fff;padding:.5em 1em;border-radius:var(--r-pill);font-size:.8em;z-index:40;opacity:0;transition:opacity .3s;pointer-events:none}
#toast.show{opacity:1}
.quiz-edit{display:grid;gap:.6em;max-width:56em}
.quiz-edit textarea{width:100%;min-height:16em;font:12px/1.4 ui-monospace,Menlo,monospace;padding:.8em;border:1px solid var(--outline-2);border-radius:var(--r-md);background:var(--surface)}

/* Cihaz çizimleri (img/*.svg) + tıklanabilir bölgeler */
.gear{position:relative;height:min(56vh,520px);width:auto;max-width:100%;justify-self:center;border-radius:var(--r-md);overflow:hidden}
.gear img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.gear .hot{position:absolute;background:transparent;border:2px solid transparent;border-radius:6px;cursor:pointer;padding:0;transition:all .15s}
.gear .hot:hover{border-color:var(--lime);background:rgba(214,248,76,.18)}
.gear .hot.on{border-color:var(--lime);background:rgba(214,248,76,.28);box-shadow:0 0 0 3px rgba(214,248,76,.35)}
.gInfo{margin-top:.2em}

/* ---- Modül rengi: her slayt --ac / --ac-soft taşır (deck-art.js paleti) ---- */
.slide{--ac:var(--lime);--ac-soft:var(--lime-soft)}
.eyebrow::before{background:var(--ac)}
mark{background:linear-gradient(transparent 38%,var(--ac) 38%,var(--ac) 92%,transparent 92%)}
.block .bn{color:var(--ac);opacity:.55}
.card.hot{background:var(--ac-soft);border-color:var(--ac)}
.trick{border-left-color:var(--ac)}
.vis{border-top:5px solid var(--ac)}
.vis .cap b{color:var(--text)}
.quiz .opt .l{background:var(--ac-soft);color:var(--text)}
.quiz .opt:hover{border-color:var(--ac)}
.quiz .nav button{background:var(--ac)}
ul.list li::before{background:var(--ac)}
.foot > span:first-child::after{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--ac);margin-left:.6em;vertical-align:middle}
/* arka plan yumuşak renk lekesi */
.slide::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(60% 50% at 92% 8%,var(--ac-soft) 0,transparent 70%),
  radial-gradient(40% 40% at 4% 96%,var(--ac-soft) 0,transparent 70%)}
.slide.cover::before{display:none}
/* modül kapağı: sol hedefler, sağ illüstrasyon */
.block-body{grid-template-columns:1.1fr .9fr;align-items:center}
.hero{justify-self:center;width:min(100%,44vh);max-width:520px}
.hero .art{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 36px rgba(20,23,31,.12))}
.hero.sm{width:min(100%,30vh);max-width:360px;display:grid;gap:1em;justify-items:center}
.qmeta{display:grid;gap:.25em;justify-items:center;text-align:center;color:var(--text-2);font-size:.9em}
.qmeta b{font-family:var(--head);font-size:1.5em;color:var(--text)}
.qdots{display:flex;gap:.4em;margin-top:.3em}
.qdots i{width:.8em;height:.8em;border-radius:50%;background:var(--outline-2);display:block}
.qdots i.done{background:var(--ac)}.qdots i.cur{background:var(--text)}
.quiz-body{grid-template-columns:1.4fr .6fr;align-items:center}
.quiz-body .quiz{max-width:none}
@media (max-width:900px){.block-body,.quiz-body{grid-template-columns:1fr}.hero{width:min(100%,32vh)}.hero.sm{display:none}}
.audio .pb{background:var(--ac)}
.cards .card{border-top:5px solid var(--ac)}
.cards .card.hot{border-top-color:var(--text)}
.agenda .row{border-left:6px solid var(--row-ac,var(--lime))}
.block .bn{display:none}
.gear.wide{height:auto;width:100%;max-height:none}
/* Program: iki sütun, ekrana sığar, satır tıklanınca modüle gider */
.agenda{grid-template-columns:1fr 1fr;gap:6px 10px;font-size:clamp(12px,.95vw,17px)}
.agenda .row{grid-template-columns:1fr auto;gap:.8em;padding:.45em .9em;cursor:pointer;transition:transform .15s,box-shadow .15s}
.agenda .row:hover{transform:translateX(3px);box-shadow:0 8px 22px rgba(20,23,31,.1)}
.agenda .row .t{display:flex;gap:.6em;align-items:baseline;min-width:0}
.agenda .row .t b{font-family:var(--head);color:var(--text-3);font-size:.85em;width:1.4em;flex:none}
.agenda .row .t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.agenda .row.brk{display:none}
@media (max-width:900px){.agenda{grid-template-columns:1fr}}

/* ---- Cihaz çizimi: büyük + yakınlaştırma ---- */
.two:has(.gear){grid-template-columns:.62fr 1.38fr;gap:clamp(18px,3vw,50px)}
.gear{height:min(64vh,700px)}
.gear .gsvg,.gear .gsvg svg{width:100%;height:100%;display:block}
.gear svg .hot{fill:transparent;stroke:transparent;stroke-width:1.2;cursor:pointer;transition:fill .15s,stroke .15s}
.gear svg .hot:hover{fill:rgba(214,248,76,.2);stroke:var(--lime)}
.gear svg .hot.on{fill:rgba(214,248,76,.28);stroke:var(--lime);stroke-width:1.6}
.gchips{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.4em}
.chip{font-size:.62em;font-weight:700;padding:.28em .7em;border-radius:var(--r-pill);background:var(--elev);color:var(--text-2);border:1.5px solid transparent}
.chip:hover{border-color:var(--ac)}.chip.on{background:var(--ac);color:var(--on-lime)}.chip.all{background:var(--surface);border-color:var(--outline-2)}
.vis:has(.gear) .gInfo p{font-size:.85em}

/* ---- Laboratuvar ortak kontroller ---- */
.btn.on{background:var(--ac);color:var(--on-lime)}
.kn{display:grid;gap:.2em;justify-items:center;font-size:.62em;font-weight:700;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase}
.kn input[type=range]{writing-mode:vertical-lr;direction:rtl;width:1.3em;height:5.2em;accent-color:var(--on-lime);cursor:pointer}
.kn.h input[type=range]{writing-mode:horizontal-tb;direction:ltr;width:100%;height:1.4em}
.eq3{display:grid;grid-template-columns:repeat(3,1fr);gap:.3em}
.eq3.wide{gap:10px;margin-top:.5em}.eq3.wide .band{display:grid;gap:.3em;justify-items:center}.eq3.wide .band input{width:100%;accent-color:var(--on-lime)}
.vmeter{width:.7em;height:5.2em;background:var(--elev);border-radius:4px;position:relative;overflow:hidden;justify-self:center}
.vmeter i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(to top,var(--ok) 0 60%,var(--warn) 60% 85%,var(--bad) 85%);transition:height .05s}
.vmeter.hot{box-shadow:0 0 0 2px var(--bad)}

/* ---- MIXLAB ---- */
.mixlab{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:clamp(8px,1vw,16px);font-size:.9em}
.mixlab .deck{background:#1C1F26;color:#E6E8EC;border-radius:var(--r-md);padding:.7em;display:grid;gap:.5em}
.mixlab .dhead{display:flex;justify-content:space-between;align-items:baseline}.mixlab .dhead b{font-family:var(--head)}.mixlab .dhead .small{color:#9AA0AE}
.mixlab .dscreen{background:#0B1220;border-radius:8px;padding:.5em .7em;display:grid;grid-template-columns:1fr auto;gap:.2em .6em;align-items:center}
.mixlab .bpm{font-family:var(--head);font-size:1.6em;line-height:1;color:#D6F84C}.mixlab .bpm small{font-size:.45em;color:#9AA0AE;margin-left:.3em}
.mixlab .rate{font-size:.8em;color:#E6E8EC;font-weight:700;text-align:right}
.mixlab .beats{grid-column:1/-1;width:100%;height:auto}
.mixlab .dctl{display:grid;grid-template-columns:1fr auto;gap:.5em;align-items:end}
.mixlab .nudge{display:flex;gap:.3em;grid-column:1/-1}
.mixlab .tempo{display:grid;gap:.2em;justify-items:center;font-size:.75em;color:#9AA0AE}
.mixlab .tempo input{writing-mode:vertical-lr;direction:rtl;height:7em;accent-color:#D6F84C}
.mixlab .tr{display:grid;gap:.3em}
.mixlab .deck .btn{background:#2B2E36;color:#E6E8EC}.mixlab .deck .btn:hover{background:#3A3E48}
.mixlab .deck .btn.play{background:#34C77B;color:#14171F;font-size:1.1em}.mixlab .deck .btn.cue{background:#FF9F43;color:#14171F}
.mixlab .mixer{background:var(--surface);border-radius:var(--r-md);padding:.7em;box-shadow:var(--shadow);display:grid;gap:.6em}
.mixlab .chs{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.mixlab .ch{display:grid;gap:.35em;justify-items:center;background:var(--elev);border-radius:8px;padding:.5em .3em}
.mixlab .ch .fader{display:grid;grid-template-columns:auto auto;gap:.4em;align-items:center}
.mixlab .ch .fader input{writing-mode:vertical-lr;direction:rtl;height:6em;accent-color:var(--on-lime)}
.mixlab .master{display:grid;gap:.3em;justify-items:center}
.mixlab .xf{display:flex;gap:.5em;align-items:center}.mixlab .xf input{flex:1;accent-color:var(--on-lime)}
.mixlab .hp{display:grid;gap:.3em}
.mixlab .btn.cue.on,.mixlab .ch .btn.on{background:#FF9F43;color:#14171F}

/* ---- CUEMIX ---- */
.cuemix{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:12px;align-items:stretch}
.cuemix .src{display:grid;gap:8px}.cuemix .box{background:var(--surface);border-radius:var(--r-md);padding:.7em;display:grid;gap:.2em;box-shadow:var(--shadow);border-left:6px solid var(--text)}
.cuemix .box.b{border-left-color:var(--ac)}.cuemix .box b{font-family:var(--head)}
.cuemix .hpc{display:grid;gap:8px}.cuemix .ear{display:grid;gap:.2em;justify-items:center}
.cuemix .earbox{width:100%;min-height:3.2em;border-radius:var(--r-md);background:var(--elev);display:grid;place-items:center;font-family:var(--head);font-size:1.3em;font-weight:700}
.cuemix .ctl{display:grid;gap:.5em;align-content:start}

/* ---- KEYLAB ---- */
.keylab{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.keylab>div{background:var(--surface);border-radius:var(--r-md);padding:1em;box-shadow:var(--shadow);display:grid;gap:.2em}
.keylab .k{font-size:.65em;font-weight:700;letter-spacing:.08em;color:var(--text-3)}.keylab b{font-family:var(--head);font-size:1.6em}
.keylab .kl-next{border:2px dashed var(--ac)}

/* ---- STRUCTURELIVE / PHRASETRAINER ---- */
.ptrain{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.ptpad{height:clamp(110px,20vh,200px);border-radius:18px;background:var(--lime-soft);border:2px dashed var(--lime-2);display:grid;place-items:center;font-family:var(--head);font-size:2.4em;font-weight:700;cursor:pointer;user-select:none}
.ptbars{display:grid;gap:4px}.ptbars i{width:2.2em;height:1.5em;border-radius:6px;background:var(--elev);display:grid;place-items:center;font-style:normal;font-size:.75em;font-weight:700;color:var(--text-3)}
.ptbars i.on{background:var(--ac);color:var(--on-lime)}

/* ---- SETBUILDER ---- */
.setb{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;font-size:.85em}
.setb .pool{display:grid;gap:6px;align-content:start}
.setb .trk{text-align:left;background:var(--surface);border-radius:10px;padding:.5em .8em;display:grid;box-shadow:var(--shadow);border:1.5px solid transparent}.setb .trk:hover{border-color:var(--ac)}
.setb .trk span{font-size:.8em;color:var(--text-3)}
.setb .setlist{display:grid;gap:6px;align-content:start}
.setb .srow{display:grid;grid-template-columns:auto 1fr auto auto auto auto;gap:.6em;align-items:center;background:var(--surface);border-radius:10px;padding:.45em .8em;box-shadow:var(--shadow)}
.setb .srow .n{font-family:var(--head);font-weight:700;color:var(--text-3)}
.setb .fb{font-size:.72em;font-weight:700;padding:.15em .5em;border-radius:var(--r-pill)}
.setb .fb.ok{background:#EAF9F0;color:#1F8F55}.setb .fb.warn{background:#FFF4DB;color:#9A6B00}.setb .fb.bad{background:#FFECEC;color:#C0392B}
.setb .x{color:var(--text-3);font-weight:700}

/* ---- ANALYZE ---- */
.anres{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:.5em}
.anres>div{background:var(--elev);border-radius:10px;padding:.5em .7em;display:grid}
.anres .k{font-size:.62em;font-weight:700;letter-spacing:.08em;color:var(--text-3)}.anres b{font-family:var(--head);font-size:1.2em}
@media (max-width:900px){.mixlab,.cuemix{grid-template-columns:1fr}.two:has(.gear){grid-template-columns:1fr}}
/* Geniş görsel düzeni: başlık + maddeler tek satır, görsel tam genişlik */
.body.wide{display:grid;grid-template-rows:auto 1fr;gap:clamp(8px,1.2vh,16px);align-content:start;min-height:0}
.body.wide>.stack{gap:.4em}
.body.wide h2{font-size:clamp(22px,2.4vw,38px)}
.body.wide ul.list{display:flex;flex-wrap:wrap;gap:.3em 1.6em;font-size:.85em}
.body.wide .trick{display:none}
.body.wide .vis{min-height:0;overflow:auto}
.mixlab{font-size:.78em}
.mixlab .tempo input{height:6em}.mixlab .ch .fader input{height:5em}
.mixlab .deck,.mixlab .mixer{align-content:start}
.mixlab .dhead{align-self:start}
.eq3.four{grid-template-columns:repeat(4,1fr)}
.mixlab .master{grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:.6em}
.mixlab .master .small{writing-mode:vertical-lr;transform:rotate(180deg)}
.mixlab .hp{grid-template-columns:auto 1fr;align-items:center;gap:.6em}
.gear{height:min(60vh,700px)}
.gside{display:grid;gap:.6em}.gside .gInfo{margin:0}.gside .gchips{margin:0}

/* ---- Gerçek parça laboratuvarları ---- */
.row.wrap{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;margin-top:.5em}
.tsel,.tin,.tedit select{font:inherit;font-size:.85em;padding:.35em .6em;border-radius:var(--r-md);border:1.5px solid var(--outline-2);background:var(--surface);color:var(--text)}
.tedit{margin-top:.8em;padding:.8em;border-radius:var(--r-md);background:var(--lime-soft);border:1.5px dashed var(--lime-2);display:grid;gap:.4em}
.pcinfo{display:grid;gap:.4em;align-content:center}
.bmt{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:stretch}
.deckmini{background:#1C1F26;color:#E6E8EC;border-radius:var(--r-md);padding:.8em 1em;display:grid;gap:.2em;align-content:center;justify-items:center;min-width:8em}
.deckmini b{font-family:var(--head);color:#9AA0AE}.deckmini .big{font-family:var(--head);font-size:1.8em;color:#D6F84C;line-height:1}.deckmini .small{color:#9AA0AE}
.bmtc{display:grid;gap:.5em}.bmtc .step{background:var(--surface);border-radius:10px;padding:.5em .8em;display:grid;gap:.3em;box-shadow:var(--shadow)}
.bmtc .step .k{font-size:.65em;font-weight:700;letter-spacing:.08em;color:var(--text-3)}.bmtc .step .row{display:flex;gap:.5em;align-items:center;flex-wrap:wrap}
.bmtc .btn.ok{background:#EAF9F0;color:#1F8F55}.bmtc .btn.no{background:#FFECEC;color:#C0392B}
.setgame{display:grid;grid-template-columns:.9fr 1.4fr;gap:12px;font-size:.82em}
.sgpool{display:grid;grid-template-columns:1fr 1fr;gap:5px;align-content:start;max-height:52vh;overflow:auto;padding-right:4px}
.sgt{text-align:left;background:var(--surface);border-radius:10px;padding:.4em .6em .4em 1.6em;display:grid;box-shadow:var(--shadow);border:1.5px solid transparent;position:relative;line-height:1.25}
.sgt:hover{border-color:var(--ac)}.sgt.dis{opacity:.45}.sgt span{font-size:.75em;color:var(--text-3)}.sgt em{font-size:.72em;font-style:normal;color:var(--text-2)}
.sgt .tl{position:absolute;left:.5em;top:.7em;width:.7em;height:.7em;border-radius:50%;background:var(--outline-2)}
.sgt .tl.g{background:#34C77B}.sgt .tl.y{background:#FFC44D}.sgt .tl.r{background:#FF5C5C}
.sgmain{display:grid;gap:.4em;align-content:start}.sglist{display:grid;gap:4px}
.sgtl{margin-top:.3em;color:var(--text-3)}
@media (max-width:900px){.bmt,.setgame{grid-template-columns:1fr}}

/* ---- Ekipman ikonları ---- */
.gicon{width:2.6em;height:2.6em;display:block}
.key.ico{display:grid;justify-items:center;gap:.2em}.key.ico .gicon{width:3.4em;height:3.4em}
.scsvg{width:100%;height:auto;display:block}
.scsvg .scbox{fill:var(--surface);stroke:var(--outline-2);stroke-width:2}
.scsvg .scn{cursor:pointer}.scsvg .scn.on .scbox{fill:var(--ac);stroke:var(--text)}
.scsvg .sct{font:700 9px Inter,sans-serif;fill:var(--text)}
.scsvg .scl{fill:none;stroke:var(--outline-2);stroke-width:3}
.scsvg .scl.on{stroke:var(--text);stroke-dasharray:6 6;animation:scflow 1s linear infinite}
@keyframes scflow{to{stroke-dashoffset:-12}}
#scInfo{margin-top:.4em}
.cuemix .box{grid-template-columns:auto 1fr auto;align-items:center;gap:.6em}
.cuemix .box .gicon{width:2.4em;height:2.4em}.cuemix .box>div{display:grid}
.cuemix .ear .gicon{width:2.2em;height:2.2em}

/* ---- Sequencer ---- */
.sqwrap{overflow-x:auto}
.sqgrid{display:grid;gap:4px;min-width:0}
.sqrowwrap{display:grid;grid-template-columns:9em 1fr;gap:8px;align-items:center;min-width:0}
.sqn{min-width:0}
.sqrow{display:grid;gap:2px}
.sqc{aspect-ratio:1;min-width:8px;max-height:22px;border-radius:4px;background:var(--elev);border:1.5px solid transparent;padding:0;transition:background .08s}
.sqc.q{background:#E3E9F2}.sqc.on{background:var(--ac)}.sqc.cur{border-color:var(--text)}.sqc.on.cur{background:var(--text)}
.sqlayers{display:flex;gap:.35em;flex-wrap:wrap;align-items:center;margin-top:.5em}
/* kompakt ses etiketi: sequencer satır başlığı = admin'de değiştirilebilir örnek */
.sqrowwrap .audio{width:100%;padding:.15em .5em .15em .15em;gap:.4em}
.sqrowwrap .audio .pb{width:1.7em;height:1.7em}
.sqrowwrap .audio .lbl{font-size:.72em}.sqrowwrap .audio .lbl small{display:none}
.sqrowwrap .audio .st{display:none}
.sqrowwrap .audio .up label{padding:.15em .45em;font-size:.62em}
@media (max-width:900px){.sqrowwrap{grid-template-columns:6.5em 1fr}}

/* ---- Kablolar: ikonlu eşleştirme ---- */
.cbwrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,90px)}
.cbcol{display:grid;gap:8px;z-index:1}
.cbcard{display:grid;grid-template-columns:auto 1fr;gap:.6em;align-items:center;text-align:left;background:var(--surface);border-radius:var(--r-md);padding:.5em .8em;box-shadow:var(--shadow);border:2px solid transparent}
.cbcard .gicon{width:2.2em;height:2.2em;flex:none}
.cbcard:hover{border-color:var(--ac)}
.cbcard.sel{border-color:var(--text);background:var(--lime-soft)}
.cbcard.done{border-color:var(--ok);opacity:.85}
.cbcard.no{border-color:var(--bad);animation:cbshake .3s}
@keyframes cbshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.cblines{position:absolute;inset:0;pointer-events:none;overflow:visible}
@media (max-width:900px){.cbwrap{grid-template-columns:1fr;gap:8px}.cblines{display:none}}

/* ---- Arıza tatbikatı ---- */
.flcard{display:flex;gap:1em;align-items:center;background:var(--surface);border-radius:var(--r-md);padding:1em 1.2em;box-shadow:var(--shadow);margin-bottom:.6em}
.flicon{flex:none}.flicon .gicon{width:3em;height:3em}
.flq{font-family:var(--head);font-weight:700;font-size:1.25em}
.flopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---- Kütüphane ---- */
.libcrumb{display:flex;gap:.6em;align-items:center;margin-bottom:.5em;min-height:1.6em}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:8px}
.libcard{display:grid;justify-items:center;gap:.3em;text-align:center;background:var(--surface);border-radius:var(--r-md);padding:.9em .6em;box-shadow:var(--shadow);border:2px solid transparent}
.libcard[data-i]:hover{border-color:var(--ac)}
.libcard .gicon{width:2.4em;height:2.4em}
.libcard span{font-size:.78em;color:var(--text-3);display:flex;align-items:center;gap:.3em;justify-content:center}
.libcard span .gicon{width:1em;height:1em}
.libcard.sub{background:var(--ac-soft)}

/* Derse dönüş — sol üst, HUD'dan ayrı, her zaman görünür */
#btnBack{position:fixed;left:clamp(16px,2vw,34px);top:clamp(14px,2vh,26px);z-index:20;padding:.5em 1em;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow);color:var(--text);font-size:.72em;font-weight:600}
#btnBack:hover{background:var(--lime)}
@media (max-width:700px){#btnBack{font-size:.68em;padding:.45em .85em}}

/* Gömme modu (?embed=1): mobil uygulama slaytın içine tek laboratuvarı gömer —
   üst çubuk, HUD, ipucu ve alt bilgi gizlenir, yalnız içerik kalır. */
.embed #btnBack,.embed #hud,.embed #hint,.embed .foot{display:none !important}
