/* 6. CAGED sistemi */
.fb-wrap.cg { width: 100%; }

/* kök her zaman altın kare: şekil renginde boyanan işaretlerde de */
.fb-wrap.cg .mk.is-root[class*="sh-"] { --mk: var(--root); --mk-t: #2a1c19; }
/* iki şekli birbirine bağlayan kök */
.fb-wrap.cg .mk.cg-shared .mk-sq { stroke: var(--ink); stroke-width: 3; }
.fb-wrap.cg .mk.cg-shared .mk-in { animation: cgPulse 1.6s ease-in-out infinite; }
@keyframes cgPulse { 50% { transform: scale(1.2); } }
.fb-wrap.cg .fb-region .rg-lab { font-size: 12px; }

/* şekil seçici: küçük diyagramlı düğmeler */
.cg-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.cg-pick {
  --sc: var(--accent);
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px 4px 4px; cursor: pointer;
  border: 0; border-radius: 12px; background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background .15s, transform .1s;
}
.cg-pick b { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; font-stretch: 85%; color: var(--sc); line-height: 1; min-width: .8em; }
.cg-pick:hover { box-shadow: inset 0 0 0 1.5px var(--sc); }
.cg-pick.on { background: var(--surface-2); box-shadow: inset 0 0 0 2.5px var(--sc); }
.cg-pick:active { transform: translateY(1px); }
.cg-mini { width: 44px; height: 51px; display: block; }
.cg-mini-str { stroke: var(--ink-2); stroke-width: .8; opacity: .7; }
.cg-mini-fret { stroke: var(--ink-2); stroke-width: .7; opacity: .45; }
.cg-mini-nut { fill: var(--ink); }
.cg-mini-dot { fill: var(--sc); }
.cg-mini-root { fill: var(--root); stroke: rgba(20, 10, 8, .45); stroke-width: .6; }
.cg-mini-open { fill: none; stroke: var(--ink-2); stroke-width: 1.1; }
.cg-mini-open.root { stroke: var(--root-ink); stroke-width: 1.8; }
.cg-mini-x { stroke: var(--muted); stroke-width: 1.2; stroke-linecap: round; }

.cg-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cg-big { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: .9; color: var(--sc); font-stretch: 80%; transition: color .3s; }
.cg-sub { font-family: var(--f-body); font-weight: 500; font-size: .95rem; color: var(--ink-2); }
.cg-sub .chord { font-weight: 700; color: var(--ink); }

.cg-note { margin: 0; font-size: .9rem; color: var(--ink-2); min-height: 2.6em; }
.cg-posinfo { color: var(--ink-2); font-size: .9rem; margin-top: -8px; }
.cg-legend { flex-wrap: wrap; }
.cg-scroll { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* kaydırıcı */
.cg-slider { flex: 1 1 260px; }
.cg-slider input { flex: 1; min-width: 140px; }

/* on iki akor şeridi */
.cg-chips { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; }
.cg-chip {
  border: 0; background: var(--surface); border-radius: 6px; padding: 5px 0; cursor: pointer; color: var(--ink-2);
  font-size: .78rem; transition: background .15s, color .15s;
}
.cg-chip .chord { font-size: .78rem; letter-spacing: -0.04em; }
.cg-chip.on { background: var(--wood); color: var(--bone); }
.cg-chip:hover { color: var(--ink); }

/* beş konum düğmeleri */
.cg-pos { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-posbtn, .cg-boxbtn, .cg-progbox {
  --sc: var(--accent);
  display: inline-flex; align-items: baseline; gap: 7px; cursor: pointer; color: var(--ink);
  border: 0; border-left: 4px solid var(--sc); border-radius: 4px 12px 12px 4px; padding: 6px 12px 6px 10px;
  background: var(--surface); transition: background .15s, opacity .3s;
}
.cg-posbtn b, .cg-boxbtn b { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; color: var(--sc); line-height: 1; }
.cg-posbtn small { color: var(--muted); font-weight: 600; }
.cg-posbtn.on, .cg-boxbtn.on, .cg-progbox.on { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--sc); }
.cg-posbtn.off { opacity: .35; }
.cg-links { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .86rem; min-height: 1.4em; }
.cg-link small { color: var(--muted); }

/* kutu ↔ şekil */
.cg-boxes { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-boxbtn span { font-weight: 650; font-size: .86rem; }
.cg-boxbtn i { font-style: normal; color: var(--muted); }

/* majör / minör anahtarı */
.cg-q button { font-size: .95rem; padding: .4em 1em; }

/* alıştırmalar */
.cg-tabs { align-self: flex-start; }
.cg-tabs button { font-size: .9rem; padding: .42em 1em; }
.cg-prompt { min-height: 1.3em; }
.cg-prompt .chord { font-weight: 700; }
.cg-shname { color: var(--sc); filter: brightness(.8); }
.cg-status { margin: 0; color: var(--ink-2); font-size: .9rem; min-height: 1.4em; }
.cg-panel { display: flex; flex-direction: column; gap: 10px; }
.cg-panel[hidden] { display: none; }
.cg-ans { display: flex; gap: 6px; }
.cg-ansbtn {
  --sc: var(--accent);
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; color: var(--sc);
  background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--sc); transition: background .15s, color .15s, transform .1s;
}
.cg-ansbtn:hover { background: var(--sc); color: #fff; }
.cg-ansbtn.good { background: var(--f2); color: #fff; box-shadow: none; }
.cg-ansbtn.bad { background: var(--seventh); color: #fff; box-shadow: none; }
.cg-progrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.cg-progbox { flex-direction: column; align-items: flex-start; gap: 1px; }
.cg-progbox .chord { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.04em; }
.cg-progbox small { color: var(--muted); font-weight: 600; font-size: .78rem; }
.cg-rn { font-family: var(--f-display); font-weight: 700; color: var(--sc); font-size: .9rem; filter: brightness(.85); }

@media (max-width: 860px) {
  .cg-chips { grid-template-columns: repeat(7, 1fr); }
  .cg-pick { padding-right: 9px; }
  .cg-mini { width: 36px; height: 42px; }
  .cg-pick b { font-size: 1.25rem; }
}
@media (max-width: 420px) {
  .cg-picker { gap: 5px; }
  .cg-pick { padding: 3px 6px 3px 2px; gap: 2px; }
  .cg-mini { width: 30px; height: 35px; }
  .cg-pick b { font-size: 1.1rem; }
  .cg-ansbtn { width: 42px; height: 42px; }
}
.cg-prompt .chord { font-size: 1.15em; }