/* 1. Gitarı tanı: gp- parçalar, gt- türler, vs- titreşen tel, pr- perde cetveli */

/* ---------- Gitarın parçaları ---------- */
.gp-wrap { width: 100%; }
.gp-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
@media (max-width: 520px) { .gp-svg { touch-action: pan-y; } }
.gp-model { transition: opacity .45s ease; filter: drop-shadow(0 12px 14px rgba(36, 21, 15, .26)); }
.gp-model.off { opacity: 0; pointer-events: none; }
.gp-model [data-part] { cursor: pointer; transition: opacity .3s, filter .3s; }
.gp-svg.has-sel .gp-model [data-part]:not(.sel) { opacity: .42; }
.gp-svg:not(.has-sel) .gp-model [data-part]:hover { filter: brightness(1.12); }
.gp-model [data-part].sel { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px rgba(255, 255, 255, .95)); }
.gp-strings { pointer-events: none; }
.gp-hit { fill: transparent; }

/* malzemeler: ladin kapak, seafoam boya, gülağacı, kemik, nikel, pirinç */
.gp-s1 { stop-color: color-mix(in srgb, var(--bone) 80%, var(--root)); }
.gp-s2 { stop-color: color-mix(in srgb, var(--bone) 58%, var(--root)); }
.gp-s3 { stop-color: color-mix(in srgb, var(--root) 55%, var(--wood)); }
.gp-f1 { stop-color: color-mix(in srgb, var(--cg-c) 42%, var(--bone)); }
.gp-f2 { stop-color: color-mix(in srgb, var(--cg-c) 70%, var(--bone)); }
.gp-f3 { stop-color: color-mix(in srgb, var(--cg-c) 72%, var(--wood)); }
.gp-top.spruce { fill: url(#gp-spruce); stroke: var(--wood); stroke-width: 5; stroke-linejoin: round; }
.gp-top.foam { fill: url(#gp-foam); stroke: color-mix(in srgb, var(--cg-c) 55%, var(--wood)); stroke-width: 2; }
.gp-head { fill: var(--wood-2); }
.gp-head.foam { fill: url(#gp-foam); stroke: color-mix(in srgb, var(--cg-c) 55%, var(--wood)); stroke-width: 1.5; }
.gp-slotcut { fill: #0f0806; }
.gp-neck { fill: color-mix(in srgb, var(--wood-3) 70%, var(--root)); }
.gp-board { fill: url(#gp-board); }
.gp-fret { fill: var(--nickel); }
.gp-inlay { fill: url(#gp-pearl); }
.gp-bone { fill: var(--bone); stroke: rgba(42, 28, 25, .35); stroke-width: .6; }
.gp-ring { fill: none; }
.gp-ring.a { stroke: var(--wood); stroke-width: 2.4; }
.gp-ring.mosaic1 { stroke: var(--wood-3); stroke-width: 10; stroke-dasharray: 3 3; }
.gp-ring.mosaic2 { stroke: color-mix(in srgb, var(--cg-c) 75%, var(--bone)); stroke-width: 10; stroke-dasharray: 3 3; stroke-dashoffset: 3; }
.gp-hole { fill: url(#gp-holegrad); }
.gp-guard.tort { fill: color-mix(in srgb, var(--wood-3) 88%, var(--root)); opacity: .92; }
.gp-guard.mint { fill: var(--paper); stroke: rgba(42, 28, 25, .22); stroke-width: 1; }
.gp-bridge { fill: var(--wood-2); }
.gp-tieblock { fill: var(--wood); stroke: var(--bone); stroke-width: 1; }
.gp-knot { fill: none; stroke: #f4ecdc; stroke-width: 1.2; }
.gp-pin { fill: var(--bone); stroke: rgba(42, 28, 25, .45); stroke-width: .8; }
.gp-pu { fill: var(--bone); stroke: rgba(42, 28, 25, .35); stroke-width: 1; }
.gp-pole { fill: var(--nickel); }
.gp-plate { fill: var(--nickel); stroke: rgba(42, 28, 25, .35); stroke-width: 1; }
.gp-saddle-el { fill: var(--nickel-hi); stroke: rgba(42, 28, 25, .45); stroke-width: .8; }
.gp-hole-sm { fill: rgba(42, 28, 25, .55); }
.gp-knob { fill: var(--bone); stroke: rgba(42, 28, 25, .4); stroke-width: 1; }
.gp-knob-top { fill: var(--surface-2); stroke: rgba(42, 28, 25, .18); stroke-width: 1; }
.gp-knob-mark { stroke: var(--wood); stroke-width: 1.6; stroke-linecap: round; }
.gp-slot { fill: rgba(42, 28, 25, .55); }
.gp-lever { fill: var(--bone); stroke: rgba(42, 28, 25, .5); stroke-width: 1; }
.gp-jack { fill: var(--nickel); stroke: rgba(42, 28, 25, .45); stroke-width: 1; }
.gp-jack-in { fill: #1a110d; stroke: var(--nickel-hi); stroke-width: 1.4; }
.gp-brass { fill: color-mix(in srgb, var(--root) 75%, var(--wood)); }
.gp-roller { fill: var(--bone); stroke: rgba(42, 28, 25, .4); stroke-width: .8; }
.gp-shaft { stroke: var(--nickel); stroke-width: 2.2; }
.gp-button { fill: var(--bone); stroke: rgba(42, 28, 25, .4); stroke-width: .8; }
.gp-button.nickel { fill: var(--nickel-hi); }
.gp-machine { fill: var(--nickel); stroke: rgba(42, 28, 25, .35); stroke-width: .8; }
.gp-post { fill: var(--nickel-hi); stroke: rgba(42, 28, 25, .5); stroke-width: 1; }
/* teller */
.gp-str { fill: none; stroke-linecap: round; }
.gp-str.p-nylon { stroke: #f4ecdc; }
.gp-str.p-steel { stroke: var(--nickel-hi); }
.gp-str.w-silver { stroke: #dfe3e4; }
.gp-str.w-bronze { stroke: #cfc0a0; }
.gp-str.w-nickel { stroke: #d9dfe1; }
.gp-strings { filter: drop-shadow(0 1.5px .8px rgba(0, 0, 0, .5)); }
/* seçilen parçanın sedef iğnesi */
.gp-pinmark { pointer-events: none; opacity: 0; transition: opacity .25s; }
.gp-pinmark.show { opacity: 1; }
.gp-pin-ring { fill: none; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 3px rgba(31, 111, 106, .9)); transform-box: fill-box; transform-origin: center; }
.gp-pinmark.show .gp-pin-ring { animation: gpPin 1.3s ease-out 2; }
.gp-pin-dot { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
@keyframes gpPin { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

.gp-info { min-height: 6.4em; }
.gp-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.gp-name { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.gp-en { font-family: var(--f-mono); font-size: .78rem; color: var(--muted); }
.gp-text { margin: 0; color: var(--ink-2); max-width: 68ch; font-size: .95rem; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 4px 2px; }
.gp-chip {
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font-weight: 600; font-size: .84rem; padding: .3em .75em; border-radius: 999px;
  transition: background .15s, color .15s;
}
.gp-chip:hover { background: var(--surface); color: var(--ink); }
.gp-chip.on { background: var(--wood); color: var(--bone); }

/* ---------- Gitar türleri ---------- */
.gt-types { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line-2); }
.gt-type {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 0; background: transparent; cursor: pointer; text-align: left; padding: 8px 12px 10px; color: var(--ink);
  border-bottom: 3px solid transparent; margin-bottom: -1px; transition: border-color .15s, background .15s;
}
.gt-type b { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; font-stretch: 88%; letter-spacing: -.01em; line-height: 1.1; }
.gt-type small { color: var(--muted); font-size: .76rem; font-weight: 600; }
.gt-type:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.gt-type.on { border-bottom-color: var(--wood); }
.gt-type.on small { color: var(--accent); }
.gt-desc { margin: 0; color: var(--ink-2); font-size: .92rem; min-height: 2.9em; }
.gt-cvwrap { position: relative; height: clamp(210px, 32vh, 290px); }
.gt-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.gt-under { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .84rem; color: var(--ink-2); min-height: 1.4em; margin-top: -6px; }
.gt-under .spacer { flex: 1; }
.gt-under b { font-variant-numeric: tabular-nums; color: var(--ink); }
.gt-ghost { color: var(--muted); }
.gt-mix .sl input { width: 170px; }
.gt-mix .val { min-width: 6.4em; }

/* ---------- Titreşen tel ---------- */
.vs-read { display: flex; align-items: baseline; gap: 12px; }
.vs-note { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem); font-stretch: 82%; line-height: 1; letter-spacing: -.02em; min-width: 1.4em; }
.vs-freq { font-family: var(--f-display); font-weight: 650; font-size: 1.25rem; font-stretch: 88%; color: var(--accent); font-variant-numeric: tabular-nums; }
.vs-cvwrap { position: relative; height: clamp(330px, 46vh, 420px); }
.vs-cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }
.vs-formula { margin: -4px 0 0; font-size: .9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vs-formula b { color: var(--ink); }
.vs-sep { color: var(--muted); margin: 0 .3em; }
.vs-modes { gap: 6px 6px; }
.vs-mode {
  display: inline-flex; align-items: baseline; gap: 5px; cursor: pointer;
  border: 1.5px solid var(--line-2); background: transparent; border-radius: 999px; padding: .25em .8em; color: var(--muted);
  transition: background .15s, color .15s, border-color .15s;
}
.vs-mode b { font-family: var(--f-display); font-size: 1rem; }
.vs-mode small { font-size: .78rem; font-weight: 650; }
.vs-mode.on[data-r="root"] { border-color: var(--root); background: color-mix(in srgb, var(--root) 18%, transparent); color: var(--root-ink); }
.vs-mode.on[data-r="fifth"] { border-color: var(--fifth); background: color-mix(in srgb, var(--fifth) 14%, transparent); color: var(--fifth); }
.vs-mode.on[data-r="third"] { border-color: var(--third); background: color-mix(in srgb, var(--third) 14%, transparent); color: var(--third); }

/* ---------- Perde cetveli ---------- */
.pr-wrap { width: 100%; }
.pr-svg { display: block; width: 100%; overflow: visible; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.pr-svg:focus-visible { outline-offset: 4px; }
.pr-svg [style*="transform"] { transition: transform .6s cubic-bezier(.3, .7, .2, 1), opacity .3s; }
.pr-svg.still [style*="transform"] { transition: none; }
.pr-body { fill: color-mix(in srgb, var(--bone) 78%, var(--root)); stroke: var(--wood); stroke-width: 2; transition: width .6s cubic-bezier(.3, .7, .2, 1), transform .6s cubic-bezier(.3, .7, .2, 1); }
.pr-neck { fill: url(#pr-wood); filter: drop-shadow(0 8px 10px rgba(36, 21, 15, .25)); }
.pr-fret { fill: var(--nickel); }
.pr-inlay { fill: #e9efe9; opacity: .9; }
.pr-bone { fill: var(--bone); stroke: rgba(42, 28, 25, .35); stroke-width: .6; }
.pr-str { fill: var(--nickel-hi); filter: drop-shadow(0 1px .6px rgba(0, 0, 0, .45)); transition: width .6s cubic-bezier(.3, .7, .2, 1); }
.pr-str.wound { fill: #cfc0a0; }
.pr-hover { fill: rgba(239, 231, 214, .16); opacity: 0; transition: opacity .15s; pointer-events: none; }
.pr-mid { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .7; transition: transform .6s cubic-bezier(.3, .7, .2, 1), opacity .3s, stroke-width .3s; }
.pr-midlab { font: 700 11px var(--f-body); fill: var(--accent); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.pr-svg.mid-on .pr-mid { opacity: 1; stroke-width: 3; }
.pr-selwire { fill: var(--root); filter: drop-shadow(0 0 4px rgba(232, 178, 61, .8)); }
.pr-drop { stroke: var(--root-ink); stroke-width: 1.4; }
.pr-finger { fill: var(--f1); stroke: rgba(20, 10, 8, .45); stroke-width: 1; }
.pr-ruler { fill: var(--paper); filter: drop-shadow(0 4px 6px rgba(36, 21, 15, .14)); }
.pr-ticks { stroke: var(--paper-ink); stroke-width: 1; opacity: .7; }
.pr-ticklabs text { font: 600 10px var(--f-mono); fill: var(--paper-ink); }
.pr-badge { fill: var(--wood); }
.pr-badgetxt { font: 700 10.5px var(--f-mono); fill: var(--bone); text-anchor: middle; }
.pr-br { fill: none; stroke-width: 1.3; }
.pr-br.a { stroke: var(--ink-2); }
.pr-br.b { stroke: var(--accent); }
.pr-brt { font: 650 11.5px var(--f-body); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.pr-brt.a { fill: var(--ink-2); }
.pr-brt.b { fill: var(--accent); }
.pr-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.pr-readout { display: flex; flex-direction: column; gap: 6px; }
.pr-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pr-big b { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.5rem); font-stretch: 82%; line-height: 1; }
.pr-big span { color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; }
.pr-line, .pr-ratio { margin: 0; font-size: .9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pr-line b, .pr-ratio b { color: var(--ink); }
.pr-strrow { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pr-tablewrap { max-height: clamp(180px, 30vh, 280px); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; border-radius: 6px; }
.pr-table { width: 100%; }
.pr-table thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
.pr-table tbody tr { cursor: pointer; }
.pr-table tbody tr:hover td { background: var(--surface); }
.pr-table tbody tr.half td { color: var(--accent); font-weight: 650; }
.pr-table tbody tr.on td { background: var(--wood); color: var(--bone); }
.pr-table td.pr-nn { font-family: var(--f-mono); font-size: .8rem; }
@media (max-width: 860px) {
  .pr-bottom { grid-template-columns: 1fr; }
  .pr-tablewrap { max-height: 320px; }
}
@media (max-width: 520px) {
  .gt-type { padding: 6px 9px 8px; }
  .gt-type b { font-size: 1.02rem; }
}
/* koyu temada ahşap parçalar zeminden ayrılsın */
.gp-head, .gp-neck, .gp-board, .pr-neck { stroke: var(--line); stroke-width: 1; }