/* ─────────────────────────── terim rehberi: "?" düğmesi ve açıklama penceresi ─────────────────────────── */
.qmark { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-left: 2px; vertical-align: 1px;
  border-radius: 50%; border: 0; padding: 0; background: var(--surface-3); color: var(--text-2);
  font: 800 10.5px/1 var(--sans, inherit); letter-spacing: 0; text-transform: none; cursor: pointer;
  transition: background var(--dur, .15s), color var(--dur, .15s); }
.qmark:hover, .qmark:focus-visible { background: var(--guide, var(--accent)); color: #fff; outline: none; }
.qmark--static { cursor: default; }
.qmark:not(.qmark--static) { position: relative; }
.qmark:not(.qmark--static)::after { content: ""; position: absolute; inset: -8px; }   /* parmakla dokunma alanı */
.solar-kpis small .qmark, .terr-kpis small .qmark { width: 14px; height: 14px; font-size: 9.5px; }
.stat span .qmark { vertical-align: 0; }

.sg { display: flex; flex-direction: column; gap: 6px; }
.sg-summary { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 6px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--guide, var(--accent)) 12%, transparent); }
.sg-summary .i { flex: none; margin-top: 2px; color: var(--guide, var(--accent)); }
.sg-summary p { margin: 2px 0 0; font-size: var(--fs-sm); line-height: 1.55; }
.sg-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: box-shadow .3s; }
.sg-item.is-focus { box-shadow: 0 0 0 2px var(--guide, var(--accent)); }
.sg-item summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: var(--fs-sm); }
.sg-item summary::-webkit-details-marker { display: none; }
.sg-item summary b { flex: 1; }
.sg-item[open] summary .sg-chev { transform: rotate(180deg); }
.sg-chev { transition: transform .2s; color: var(--text-3); }
.sg-body { padding: 0 12px 12px 36px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.sg-body p { margin: 0 0 8px; }
.sg-body b { color: var(--text); }
.sg-here { padding: 7px 10px; border-radius: var(--r-sm, 8px); background: var(--surface-2); color: var(--text) !important; }
@media (max-width: 560px) { .sg-body { padding-left: 12px; } }

/* pencerenin başındaki "Bu terimler ne anlama geliyor?" bağlantısı */
.guide-link { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 4px; padding: 10px 12px; text-align: left;
  border-radius: var(--r-md); border: 1px dashed color-mix(in srgb, var(--guide, var(--accent)) 55%, transparent); background: transparent;
  color: var(--text); cursor: pointer; }
.guide-link:hover { background: color-mix(in srgb, var(--guide, var(--accent)) 8%, transparent); }
.guide-link > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.guide-link b { font-size: var(--fs-sm); }
.guide-link small { font-size: var(--fs-xs); color: var(--text-3); }
.guide-link .qmark { width: 22px; height: 22px; font-size: 13px; background: var(--guide, var(--accent)); color: #fff; }