/* 1. bölüm ve 2. bölümün güç, LED ve renk kodu deneyleri (önek: c1-) */

/* ortak */
.c1-meters .meter { min-width: 0; }
.c1-meters .meter b { font-size: 0.98rem; white-space: nowrap; }
.c1-lab { display: inline-flex; align-items: center; gap: 8px; color: var(--silk-2); }
.c1-side { display: flex; flex-direction: column; gap: 10px; justify-content: center; min-width: 0; }
.c1-side .flag { align-self: flex-start; }

/* su benzetmesi */
.c1-water { overflow: hidden; border-radius: 8px; }
.c1-why {
  position: absolute; inset: 0; z-index: 4; overflow-y: auto;
  padding: 30px 18px 14px; background: rgba(12, 42, 32, 0.95); border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(239, 238, 226, 0.16);
}
.c1-why[hidden] { display: none; }
.c1-why h3 { margin: 0 0 10px; font-size: 1rem; color: var(--copper-2); }
.c1-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.c1-why li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
.c1-why li b { font-family: var(--f-display); font-stretch: 95%; font-size: 0.92rem; color: var(--silk); }
.c1-why li p { grid-column: 2; margin: 0; font-size: 0.86rem; line-height: 1.42; color: var(--silk-2); }
.c1-tag {
  grid-row: span 2; align-self: start; margin-top: 1px;
  font-family: var(--f-display); font-stretch: 85%; font-weight: 700; font-size: 0.72rem;
  padding: 1px 7px; border-radius: 4px; color: #ffc08a; border: 1px solid rgba(255, 138, 42, 0.55); background: rgba(255, 138, 42, 0.12);
}
.c1-tag.ok { color: #b9cdff; border-color: rgba(76, 134, 255, 0.5); background: rgba(76, 134, 255, 0.12); }

/* iletken / yalıtkan */
.c1-lat { border-radius: 8px; overflow: hidden; background: rgba(6, 22, 16, 0.35); box-shadow: inset 0 0 0 1px rgba(239, 238, 226, 0.1); }
.c1-matbot { display: grid; grid-template-columns: 1fr 1.05fr; gap: 14px; min-height: 0; }
.c1-cap { margin: 0; font-size: 0.86rem; line-height: 1.4; color: var(--silk-2); }
.c1-legend { gap: 6px 14px; font-size: 0.78rem; }
.c1-legend span { display: inline-flex; align-items: center; }
.c1-lg { display: inline-block; width: 10px !important; height: 10px !important; border-radius: 50% !important; margin-right: 6px; vertical-align: middle; }
.c1-lg.free { background: #a8e6ff; }
.c1-lg.bound { background: rgba(168, 230, 255, 0.55); width: 7px !important; height: 7px !important; }
.c1-lg.hole { background: transparent; border: 2px solid var(--gold); }
.c1-lg.ion { background: rgba(212, 147, 90, 0.5); border: 1.5px solid var(--copper-2); }
.c1-note { color: var(--muted); font-style: italic; }

/* güç */
.c1-gucbot { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; min-height: 0; }
.c1-phys { border-radius: 8px; background: rgba(6, 22, 16, 0.3); box-shadow: inset 0 0 0 1px rgba(239, 238, 226, 0.1); }

/* LED */
.c1-calc { display: grid; gap: 4px; padding: 10px 14px; border-radius: 8px; background: rgba(6, 22, 16, 0.35); box-shadow: inset 0 0 0 1px rgba(239, 238, 226, 0.1); }
.c1-f { margin: 0; font-family: var(--f-mono); font-size: 0.84rem; color: var(--silk-2); line-height: 1.5; }
.c1-f span { display: inline-block; min-width: 10.5em; font-family: var(--f-display); font-stretch: 88%; font-size: 0.8rem; color: var(--muted); }
.c1-f b { color: var(--copper-2); font-weight: 600; }
.c1-f b.sel { color: var(--mask); background: var(--copper-2); padding: 0 5px; border-radius: 3px; }
.c1-calc .flag { margin: 4px 0 0; justify-self: start; }
.c1-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }

/* renk kodu */
.c1-renk { gap: 10px; }
.c1-rpane { min-height: 120px; }
.c1-mid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; min-height: 0; }
.c1-quiz { min-width: 0; }
.c1-q { margin: 0 0 8px; font-family: var(--f-display); font-size: 1rem; color: var(--silk); }
.c1-big { font-family: var(--f-mono); font-size: 1.25rem; color: var(--copper-2); }
.c1-hint { margin: -4px 0 8px; font-size: 0.82rem; color: var(--muted); }
.c1-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.c1-opt { font-family: var(--f-mono); font-stretch: normal; min-width: 6.5em; }
.c1-opt.good { border-color: #6fa3ff; background: rgba(76, 134, 255, 0.2); color: #dbe6ff; }
.c1-opt.bad { border-color: var(--v1); background: rgba(255, 79, 106, 0.18); }
.c1-fb { margin: 8px 0 0; min-height: 1.3em; font-size: 0.86rem; color: var(--silk-2); }
.c1-fb.ok { color: #b9cdff; }
.c1-fb.no { color: #ffb0bd; }
.c1-ohm { min-height: 150px; border-radius: 8px; background: rgba(6, 22, 16, 0.3); box-shadow: inset 0 0 0 1px rgba(239, 238, 226, 0.1); }
.c1-meas { position: absolute; left: 8px; right: 8px; bottom: 4px; margin: 0; text-align: center; font-family: var(--f-mono); font-size: 0.76rem; color: var(--silk-2); z-index: 2; pointer-events: none; }
.c1-table { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; }
.c1-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  padding: 5px 3px 4px; border-radius: 6px; border: 1.5px solid rgba(239, 238, 226, 0.16); background: var(--mask-3);
  color: var(--silk); font-family: var(--f-display); font-stretch: 88%; text-align: center;
}
button.c1-chip { cursor: default; }
.c1-table.pal button.c1-chip { cursor: pointer; }
.c1-table.pal button.c1-chip:hover { border-color: var(--copper-2); }
button.c1-chip:disabled { opacity: 1; }
.c1-chip i { width: 100%; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(239, 238, 226, 0.2); }
.c1-chip b { font-family: var(--f-mono); font-size: 0.86rem; line-height: 1.1; }
.c1-chip span { display: none; }
.c1-chip small { font-family: var(--f-mono); font-size: 0.64rem; color: var(--muted); white-space: nowrap; }
.c1-chip.gold b { font-size: 0.74rem; }

@media (max-width: 860px) {
  .c1-su .pane { min-height: 300px; }
  .c1-yon, .c1-matsplit, .c1-gucsplit, .c1-ledsplit, .c1-renk { grid-template-rows: none !important; grid-auto-rows: auto; }
  .c1-yon > .pane:first-child { height: 300px; }
  .c1-lat { height: 300px; min-height: 0 !important; }
  .c1-matbot > .pane { height: 240px; }
  .c1-gucsplit > .pane:first-child { height: 260px; }
  .c1-phys { height: 230px; min-height: 0 !important; }
  .c1-ledsplit > .pane:first-child { height: 280px; }
  .c1-rpane { height: 150px; }
  .c1-ohm { height: 180px; }
  .c1-yonseg { flex-wrap: wrap; }
  .c1-yonseg button { white-space: nowrap; font-size: 0.8rem; }
  .c1-matbot, .c1-gucbot, .c1-mid { grid-template-columns: 1fr; }
  .c1-table { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .c1-f span { display: block; min-width: 0; }
}
.c1-meters sup { font-size: 0.66em; line-height: 0; vertical-align: 0.55em; margin-left: 1px; }
.c1-opt.good:disabled, .c1-opt.bad:disabled { opacity: 1; }
.c1-fb b { font-weight: 800; }