@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bricolage-grotesque-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo-2-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo-2-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
[hidden]{display:none!important}:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

  :root{
    color-scheme: dark;
    --bg:#0f1217; --panel:#171b22; --panel2:#1e232c; --line:#2b313c;
    --text:#ece7dc; --muted:#8f97a5;
    --amber:#f3a83a; --amber-soft:rgba(243,168,58,.35);
    --lacquer:#8b2433; --chrome:#b9c1ca; --brass:#c9a14a; --felt:#8e1f2a;
    --ivory:#fbf8f0; --ivory2:#ece5d5; --ebony:#16161a;
    --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --f-mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  }
  html{height:100%;box-sizing:border-box;background:var(--bg)}
  *,*::before,*::after{box-sizing:inherit}
  body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--f-display);font-size:14px;
    overscroll-behavior:none}

  /* Dokunmatik korumaları: tüm uygulama alanı */
  #app, #app *{
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
    -webkit-user-drag:none;
  }
  #app{height:100%;display:flex;flex-direction:column;gap:8px;padding-inline:16px;padding-block:8px}

  /* ---------- Üst çubuk ---------- */
  .bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;touch-action:manipulation}
  .brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-right:auto;padding:2px 0 0 2px}
  /* Çıkartma (sticker) logo */
  .sticker{display:inline-flex;align-items:center;gap:.3em;font-family:"Baloo 2","Bricolage Grotesque",system-ui,sans-serif;font-weight:800;
    font-size:22px;line-height:1;padding:.3em .62em .18em .4em;border-radius:.6em;white-space:nowrap;
    background:linear-gradient(160deg,#ffc25c,var(--amber) 55%,#e8932a);color:#2a1605;
    border:3px solid #fffaf0;transform:rotate(-2.5deg);box-shadow:3px 4px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.25)}
  .sticker .n{display:inline-grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:var(--lacquer);color:#fffaf0;
    font-size:.78em;border:2px solid #fffaf0;transform:rotate(8deg) translateY(-.04em)}
  .sticker .s2{color:var(--lacquer)}
  .ig{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;padding:2px 4px;border-radius:6px}
  .ig svg{width:15px;height:15px}
  .ig:hover,.ig:focus-visible{color:var(--amber)}
  .start>div{display:flex;flex-direction:column;align-items:center}
  .start .brandbig{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:22px}
  .start .sticker{font-size:clamp(30px,5vw,52px)}
  .start .ig{font-size:16px}
  .start .ig svg{width:19px;height:19px}
  .grp{display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
  .grp .lbl{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding-inline:8px 4px}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  .grp button,.tog{min-height:36px;padding:0 12px;border-radius:7px;font-weight:600;font-size:14px;color:var(--muted)}
  .grp button[aria-pressed="true"]{background:var(--panel2);color:var(--text);box-shadow:inset 0 -2px 0 var(--amber)}
  .grp button:hover{color:var(--text)}
  .tog{background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text)}
  .tog[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#1a1206}
  #octLabel{font-family:var(--f-mono);font-size:13px;min-width:74px;text-align:center;font-variant-numeric:tabular-nums}
  .oct button{font-size:20px;padding:0 12px}
  .vol{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
  .vol input{width:110px;accent-color:var(--amber);touch-action:pan-x}
  button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

  /* ---------- Sahne ---------- */
  .stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;
    touch-action:none; -ms-touch-action:none}
  #app[data-view="drums"] .piano-wrap,#app[data-view="perc"] .piano-wrap{display:none}
  #app[data-view="drums"] .perc,#app[data-view="piano"] .perc{display:none}
  #app[data-view="perc"] .drums,#app[data-view="piano"] .drums{display:none}

  /* ---------- Perküsyon: darbuka + bongo ---------- */
  .perc{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:1fr 1.5fr;gap:6px;
    background:radial-gradient(ellipse at 50% 110%, #2a2420 0%, #1b1917 60%, var(--bg) 100%);
    border:1px solid #33291f;border-radius:16px;padding:6px}
  .pcell{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;cursor:pointer}
  .ptitle{position:absolute;left:8px;top:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);pointer-events:none}
  .darbuka{position:relative;width:120px;height:120px;border-radius:50%;pointer-events:none;--d:120px;will-change:transform;
    background:repeating-conic-gradient(from 0deg, #d3d6db 0 5deg, #9a9fa7 5deg 10deg, #c7a44f 10deg 12deg, #9a9fa7 12deg 15deg);
    box-shadow:0 0 0 calc(var(--d) * .02) #5f636b, 0 calc(var(--d) * .04) calc(var(--d) * .12) rgba(0,0,0,.6)}
  .dhead{position:absolute;inset:7%;border-radius:50%;
    background:radial-gradient(circle at 45% 40%, #f6f1e6 0%, #e6ddca 62%, #cdbfa3 100%);
    box-shadow:inset 0 0 0 2px rgba(60,45,25,.25), inset 0 0 calc(var(--d) * .06) rgba(0,0,0,.18)}
  .dz{position:absolute;inset:23%;border-radius:50%;display:grid;place-items:center;
    border:2px dashed rgba(110,80,40,.45);background:radial-gradient(circle, rgba(120,90,50,.05), rgba(120,90,50,.13))}
  .dlab{display:flex;flex-direction:column;align-items:center;line-height:1;color:#3a2c18;font-size:clamp(11px, calc(var(--d) * .085), 30px)}
  .dlab b{font-weight:800;letter-spacing:.04em}
  .dlab kbd{font-size:.62em;background:rgba(255,255,255,.5);border-color:rgba(0,0,0,.2)}
  .tekLab{position:absolute;left:50%;top:10%;transform:translateX(-50%);flex-direction:row;gap:.35em;align-items:baseline}
  .tekLab b{font-size:.8em}
  .cglow,.rimglow{position:absolute;border-radius:50%;opacity:0;pointer-events:none;mix-blend-mode:screen}
  .cglow{inset:-4%;background:radial-gradient(circle, rgba(255,214,140,.8) 0%, rgba(243,168,58,.35) 55%, rgba(243,168,58,0) 75%)}
  .rimglow{inset:-3%;background:radial-gradient(circle, rgba(243,168,58,0) 52%, rgba(255,214,140,.75) 62%, rgba(243,168,58,.35) 82%, rgba(243,168,58,0) 100%)}
  .bongos{gap:0}
  .bongo{position:relative;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;pointer-events:none;--d:80px;will-change:transform;
    background:radial-gradient(circle at 42% 38%, #f3dfba 0%, #dcbc8c 58%, #b98f5a 100%);color:#3b2410;
    box-shadow:0 0 0 calc(var(--d) * .03) #c4ccd4, 0 0 0 calc(var(--d) * .075) #6e3f1e, 0 0 0 calc(var(--d) * .085) #4b2912,
      0 calc(var(--d) * .04) calc(var(--d) * .12) rgba(0,0,0,.6), inset 0 0 calc(var(--d) * .1) rgba(90,50,10,.25)}
  .bwood{width:14px;height:22%;background:linear-gradient(#7a4724,#4b2912);border-radius:3px;margin-inline:-2px;box-shadow:0 2px 4px rgba(0,0,0,.5)}
  .bongo .lab{font-size:clamp(11px, calc(var(--d) * .13), 26px)}
  .bongo kbd{background:rgba(255,255,255,.45);border-color:rgba(0,0,0,.2)}
  #app[data-mode="piano"] .perc kbd{opacity:.35}

  /* ---------- Bateri ---------- */
  .drums{flex:1;min-height:0;display:grid;gap:6px;
    grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);
    grid-template-areas:
      "crash hitom midtom ride  hhc"
      "floor kick  kick   snare hho";
    background:radial-gradient(ellipse at 50% 110%, #232833 0%, var(--panel) 55%, var(--bg) 100%);
    border:1px solid var(--line);border-radius:16px;padding:6px}
  .cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;border-radius:12px;cursor:pointer}
  .pad{position:relative;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:14px;display:grid;place-items:center;pointer-events:none;
    --d:80px; will-change:transform}
  .glow{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% 50%, rgba(255,214,140,.8) 0%, rgba(243,168,58,.4) 50%, rgba(243,168,58,.12) 100%);mix-blend-mode:screen}
  .bongo .glow{inset:-6%;border-radius:50%;background:radial-gradient(circle, rgba(255,214,140,.75) 0%, rgba(243,168,58,.35) 45%, rgba(243,168,58,0) 72%)}
  .lab{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15em;line-height:1.05;text-align:center;
    font-size:clamp(11px, calc(var(--d) * .1), 30px)}
  .lab b{font-weight:800;font-size:1em;letter-spacing:-.01em}
  .lab span{font-size:.72em;font-weight:500;opacity:.75}
  kbd{font-family:var(--f-mono);font-weight:600;font-size:.7em;padding:.12em .45em;border-radius:5px;margin-top:.2em;
    background:rgba(0,0,0,.28);color:inherit;border:1px solid rgba(255,255,255,.18);transition:opacity .2s}

  /* Deri kaplı davullar: krom çember + lake gövde */
  .t-tom,.t-snare{color:#2c2a26;
    background:radial-gradient(circle at 42% 36%, var(--ivory) 0%, #eee8da 48%, #d6cdb9 100%);
    box-shadow:
      inset 0 0 0 calc(var(--d) * .03) var(--chrome),
      inset 0 0 0 calc(var(--d) * .07) var(--lacquer),
      0 calc(var(--d) * .03) calc(var(--d) * .1) rgba(0,0,0,.55)}
  .t-snare{box-shadow:
      inset 0 0 0 calc(var(--d) * .03) var(--chrome),
      inset 0 0 0 calc(var(--d) * .065) #9aa3ad,
      0 calc(var(--d) * .03) calc(var(--d) * .1) rgba(0,0,0,.55)}
  .t-snare::before{content:"";position:absolute;inset:16%;border-radius:10px;border:1px dashed rgba(60,55,45,.25)}
  .t-tom kbd,.t-snare kbd{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.18)}
  /* Kick: ön deri */
  .t-kick{color:var(--text);
    background:radial-gradient(circle at 50% 50%, #252a33 0%, #1a1d24 58%, #12141a 100%);
    box-shadow:
      inset 0 0 0 calc(var(--d) * .03) var(--chrome),
      inset 0 0 0 calc(var(--d) * .08) var(--lacquer),
      0 calc(var(--d) * .04) calc(var(--d) * .12) rgba(0,0,0,.6)}
  .t-kick::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--d) * .62);height:calc(var(--d) * .62);transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(236,231,220,.14)}
  /* Ziller: pirinç, torna izleri */
  .t-cym,.t-hat{color:#241a07;
    background:
      radial-gradient(circle at 50% 50%, #e0c071 0 9%, rgba(0,0,0,.18) 9.5%, transparent 10.5%),
      repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 2px, rgba(0,0,0,.06) 2px 4px),
      conic-gradient(from 20deg, #b58a35, #e8cb7e, #a97d2c, #dcbb6a, #b58a35, #f0d88f, #b58a35);
    box-shadow:0 calc(var(--d) * .03) calc(var(--d) * .1) rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,240,200,.35)}
  .t-cym kbd,.t-hat kbd{background:rgba(36,26,7,.18);border-color:rgba(36,26,7,.3)}
  .t-hat.open{box-shadow:
      inset 0 0 0 calc(var(--d) * .04) rgba(90,60,10,.35),
      0 calc(var(--d) * .03) calc(var(--d) * .1) rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,240,200,.35)}
  .t-hat .lab,.t-cym .lab{background:rgba(245,230,190,.55);padding:.25em .5em;border-radius:.6em}
  #app[data-mode="piano"] .drums kbd{opacity:.35}

  /* ---------- Piyano ---------- */
  .piano-wrap{flex:1.05;min-height:0;display:flex;flex-direction:column;
    background:linear-gradient(#1b1512, #120e0c);border:1px solid #2e2520;border-radius:16px;padding:10px 10px 12px}
  .felt{height:8px;border-radius:3px;flex:none;
    background:linear-gradient(var(--felt), #6f1520);box-shadow:0 2px 3px rgba(0,0,0,.5)}
  .piano{position:relative;flex:1;min-height:0;display:flex;cursor:pointer}
  .key{position:relative;touch-action:none}
  .white{flex:1;min-width:0;height:100%;border-radius:0 0 9px 9px;margin-right:2px;
    background:linear-gradient(180deg, #ddd5c4 0%, var(--ivory) 7%, var(--ivory2) 100%);
    box-shadow:inset 0 -6px 0 #d3c9b4, 0 2px 3px rgba(0,0,0,.45);
    display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:10px;gap:4px;color:#3a352c}
  .white:last-child{margin-right:0}
  .white.down{background:linear-gradient(180deg, #d9b67a 0%, #ffe2ad 10%, #f7cf86 100%);box-shadow:inset 0 -2px 0 #caa060, 0 1px 1px rgba(0,0,0,.4);transform:translateY(2px)}
  .black{position:absolute;top:0;height:60%;z-index:2;border-radius:0 0 7px 7px;
    background:linear-gradient(180deg, #0c0c0f 0%, #2a2a31 82%, #3a3a42 92%, #1c1c21 100%);
    box-shadow:0 4px 6px rgba(0,0,0,.55), inset 0 -5px 0 #101014;
    display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:9px;color:#c9c3b6}
  .black.down{background:linear-gradient(180deg, #3b2608 0%, #a8691a 80%, #7a4a10 100%);box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 -2px 0 #5a3508}
  .key .sol,.key .let{font-weight:700;font-size:clamp(11px, 1.35vw, 20px)}
  .key .nn{font-family:var(--f-mono);font-size:clamp(9px, .9vw, 13px);color:#8d8472}
  .key kbd{font-size:clamp(9px, .85vw, 13px);border-color:rgba(0,0,0,.18);background:rgba(0,0,0,.06)}
  .black kbd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  #app[data-mode="drum"] .piano kbd{opacity:.3}

  /* ---------- Başlat katmanı ---------- */
  .start{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(10,12,16,.72);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);touch-action:manipulation}
  .start button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 44px;border-radius:20px;
    background:var(--amber);color:#1a1206;font-size:clamp(26px,4vw,44px);font-weight:800;letter-spacing:-.02em;
    box-shadow:0 12px 40px rgba(243,168,58,.35)}
  .start small{font-size:15px;font-weight:600;opacity:.8;letter-spacing:0}
  .start p{margin:16px 0 0;color:var(--muted);text-align:center;font-size:14px;max-width:42ch;line-height:1.5}
  .start[hidden]{display:none}
  /* Klavye tuş harfleri gizli (klavyeyle çalma yine çalışır) */
  #app kbd{display:none!important}
  .start p.credit{font-size:12px;margin-top:8px;opacity:.7}
  /* Araçlar satırı */
  .tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;touch-action:manipulation}
  #app[data-tools="off"] .tools{display:none}
  .sel{font:inherit;font-weight:600;font-size:14px;color:var(--text);background:var(--panel2);border:0;border-radius:7px;min-height:36px;padding:0 8px;cursor:pointer}
  .sel:focus-visible{outline:2px solid var(--amber)}
  #bpmLabel{font-family:var(--f-mono);font-size:13px;min-width:72px;text-align:center;font-variant-numeric:tabular-nums}
  .beats{display:flex;gap:6px;align-items:center;padding-inline:4px}
  .beats i{width:12px;height:12px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);transition:background .06s}
  .beats i.first{width:16px;height:16px}
  .beats i.on{background:var(--amber);border-color:var(--amber);box-shadow:0 0 10px var(--amber-soft)}
  .grp button.play[aria-pressed="true"]{background:var(--amber);color:#1a1206;box-shadow:none}
  .grp button.rec[aria-pressed="true"]{background:#c8323f;color:#fff;box-shadow:none;animation:recblink 1s steps(2) infinite}
  @keyframes recblink{50%{background:#8f2330}}
  .grp button:disabled{opacity:.35;cursor:default}
  #recTime{font-family:var(--f-mono);font-size:13px;color:var(--muted);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
  /* Akor göstergesi */
  .phead{display:flex;align-items:baseline;justify-content:flex-end;gap:12px;min-height:34px;padding:0 6px 6px}
  .phead b{font-size:clamp(17px,1.8vw,26px);font-weight:800;color:var(--amber);letter-spacing:-.01em}
  .phead span{font-family:var(--f-mono);font-size:clamp(13px,1.2vw,18px);color:var(--text);opacity:.85}
  .phead em{font-style:normal;color:var(--muted);font-size:13px}
  #app[data-labels="sol"] .key .let{display:none}
  #app[data-labels="let"] .key .sol{display:none}
  #app[data-names="off"] .key .sol,#app[data-names="off"] .key .let,#app[data-names="off"] .key .nn,#app[data-names="off"] .key .bub{display:none!important}
  /* Basılan tuşun üstünde nota adı */
  .bub{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);display:none;align-items:center;
    padding:3px 10px;border-radius:10px;background:var(--amber);color:#1a1206;font-weight:800;font-size:clamp(14px,1.6vw,26px);
    line-height:1.15;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.55);z-index:6;pointer-events:none}
  .bub::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--amber)}
  .key .bub i{font-style:normal;font-size:inherit;font-weight:800}
  .key.down .bub{display:flex}
  .black .bub{bottom:auto;top:52%}
  .black .bub::after{display:none}
  #app[data-labels="sol"] .key .bub .let{display:none}
  #app[data-labels="let"] .key .bub .sol{display:none}
  /* Metronom ışığı */
  .redflash{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;background:rgba(225,28,45,.45);box-shadow:inset 0 0 120px rgba(255,40,60,.9)}
  .redflash.green{background:rgba(30,185,85,.38);box-shadow:inset 0 0 120px rgba(40,220,110,.85)}
  .grp button.light[aria-pressed="true"]{background:#d6283a;color:#fff;box-shadow:none}
  .pad .lab{font-size:var(--f,14px)}
  .pad.small .lab span{display:none}
  .pad.tiny .lab kbd{display:none}
  .pad.small.t-hat .lab b{display:none}
  .pad.small.t-hat .lab span{display:block;font-size:.95em;font-weight:800;opacity:1}
  .pad.small.t-hat .lab,.pad.small.t-cym .lab{padding:.15em .35em}
  .rot{display:none;color:var(--muted);font-size:12px;text-align:center}

  /* ---------- Duyarlı yerleşim ---------- */
  @media (max-width: 760px){
    .vol span,.grp .lbl{display:none}
    .sticker{font-size:18px}
    .vol input{width:80px}
    .grp button,.tog{min-height:34px;padding:0 9px;font-size:13px}
  }
  @media (orientation: portrait) and (max-width: 760px){
    .drums{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
      grid-template-areas:"crash hitom ride" "floor midtom hhc" "kick snare hho"}
    .rot{display:block}
    .perc{grid-template-columns:1fr 1.3fr}
    .ptitle{display:none}
    .key .sol,.key .let{font-size:10px} .key .nn{display:none}
    .white{padding-bottom:6px}
  }
  /* Yatay telefon: sahneye en geniş alan */
  @media (max-height: 520px){
    #app{gap:5px;padding-block:4px}
    .bar{gap:5px 8px}
    .brand{display:none}
    .vol span,#fs .txt,.grp .lbl{display:none}
    .grp button,.tog{min-height:30px;padding:0 7px;font-size:12px}
    #octLabel{min-width:60px;font-size:11px}
    .vol input{width:70px}
    .stage{gap:6px}
    .drums{padding:3px;gap:3px;border-radius:12px}
    .perc{padding:3px;gap:3px;border-radius:12px}
    #octLabel{min-width:52px}
    .ptitle{display:none}
    .piano-wrap{padding:5px 6px 6px;border-radius:12px}
    .felt{height:5px}
    .phead{min-height:22px;padding-bottom:3px}
    .phead em{display:none}
    .tools{gap:5px 8px}
    .sel{min-height:30px;font-size:12px}
    .key .nn{display:none}
    .white{padding-bottom:5px}
  }
  @media (max-width: 1500px){ #fs .txt{display:none} }
  @media (prefers-reduced-motion: reduce){ .white.down{transform:none} }

/* Koro sitesi: stüdyo XP çubuğu */
.koro-strip{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;border-radius:999px;background:rgba(15,18,23,.92);border:1px solid #2b313c;color:#ece7dc;font:600 13px "Bricolage Grotesque","Segoe UI",system-ui,sans-serif;max-width:100%}
.koro-strip a{color:#f3a83a;text-decoration:none;font-weight:800;white-space:nowrap}
.koro-strip .kbar{width:90px;height:8px;border-radius:99px;background:#2b313c;overflow:hidden;flex:none}
.koro-strip .kbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f3a83a,#ffd27a);transition:width .6s}
.koro-strip.done .kbar i{background:#5bc27a}
.koro-strip .ktxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.koro-strip .kx{background:none;border:0;color:#8f97a5;font-size:16px;line-height:1;padding:2px 6px;cursor:pointer}
.koro-strip.pop{animation:kpop .6s ease}
@keyframes kpop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}