/* Veri Yapıları sunumları: ortak stil (800x600 sahne) */
.ds-deck,
.ds-deck *,
.ds-deck *::before,
.ds-deck *::after {
  box-sizing: border-box;
}

.ds-deck {
  --ds-text: var(--global-text-color, #1f2937);
  --ds-bg: var(--global-bg-color, #ffffff);
  --ds-link: var(--global-link-color, #2563eb);
  --ds-border-base: var(--global-border-color, #d1d5db);
  --ds-accent: #a61b1b;
  --ds-good: #1f8a4c;
  --ds-bad: #c0392b;
  --ds-surface: color-mix(in srgb, var(--ds-link) 2.5%, var(--ds-bg));
  --ds-surface-strong: color-mix(in srgb, var(--ds-link) 8%, var(--ds-bg));
  --ds-border: color-mix(in srgb, var(--ds-link) 38%, var(--ds-border-base));
  --ds-muted: color-mix(in srgb, var(--ds-text) 62%, var(--ds-bg));
  --ds-node: color-mix(in srgb, var(--ds-link) 16%, var(--ds-bg));
  --ds-hot: color-mix(in srgb, #e9a23b 45%, var(--ds-bg));
  --ds-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);

  width: min(800px, 100%);
  margin: 0 auto 2rem;
  color: var(--ds-text);
}

html[data-theme="dark"] .ds-deck {
  --ds-accent: #f07a7a;
  --ds-good: #5ccf8c;
  --ds-bad: #f08a7e;
}

/* ---------- 800x600 stage, scaled to fit ---------- */
.ds-deck__screen {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  outline: none;
}

.ds-deck__stage {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 800px;
  height: 600px;
  border: 1.5px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
  overflow: hidden;
  transform-origin: 0 0;
  font-size: 18px;
}

.ds-deck__screen:fullscreen {
  background: var(--ds-bg);
}

.ds-deck__screen:fullscreen .ds-deck__stage {
  border-radius: 0;
  box-shadow: none;
}

.ds-deck__progress {
  flex: none;
  height: 4px;
  background: var(--ds-surface-strong);
}

.ds-deck__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ds-link);
  transition: width .25s ease;
}

.ds-deck__viewport {
  position: relative;
  flex: 1;
  min-height: 0;
}

.ds-deck__slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: 22px 40px 14px;
  overflow: hidden;
  animation: ds-fade .22s ease;
}

.ds-deck__slide.is-active {
  display: flex;
}

/* slide children keep their natural height; overflow is caught by the checker instead of silently squeezing */
.ds-deck__slide > * {
  flex-shrink: 0;
}

@keyframes ds-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-deck__slide { animation: none; }
  .ds-deck__progress span { transition: none; }
}

/* ---------- typography ---------- */
.ds-deck__kicker {
  margin: 0 0 2px;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ds-deck__slide h2 {
  margin: 0 0 14px;
  color: var(--ds-accent);
  font-size: 29px;
  line-height: 1.15;
}

.ds-deck__slide h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.ds-deck__slide ul,
.ds-deck__slide ol {
  margin: 0;
  padding-left: 22px;
  line-height: 1.42;
}

.ds-deck__slide li {
  margin: 5px 0;
}

.ds-deck__slide li::marker {
  color: var(--ds-link);
}

.ds-deck__slide ul ul {
  margin-top: 2px;
  padding-left: 22px;
  font-size: 16.5px;
}

.ds-deck__slide p {
  margin: 0 0 8px;
  line-height: 1.45;
}

.ds-deck__slide sup {
  font-size: .68em;
  line-height: 0;
}

.ds-deck__slide code,
.ds-deck__code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.ds-deck__slide :not(pre) > code {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--ds-surface-strong);
  font-size: .9em;
}

.ds-deck__slide a {
  color: var(--ds-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ds-deck__slide a:hover { text-decoration-thickness: 2px; }

.ds-deck__small { font-size: 15.5px; }
.ds-deck__muted { color: var(--ds-muted); }
.ds-deck__center { text-align: center; }
.ds-deck__push { margin-top: auto; }

/* ---------- title slides ---------- */
.ds-deck__slide--title {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ds-deck__slide--title h1 {
  margin: 0 0 10px;
  color: var(--ds-accent);
  font-size: 52px;
  line-height: 1.1;
}

.ds-deck__slide--title .ds-deck__subtitle {
  font-size: 24px;
  font-weight: 700;
}

.ds-deck__slide--title small {
  display: block;
  margin-top: 26px;
  color: var(--ds-muted);
  font-size: 15px;
}

.ds-deck__agenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 620px;
  margin-top: 30px;
}

.ds-deck__agenda span {
  padding: 5px 12px;
  border: 1.5px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-bg);
  font-size: 14px;
}

/* ---------- layout helpers ---------- */
.ds-deck__two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.ds-deck__two--wide-left { grid-template-columns: 1.25fr 1fr; }
.ds-deck__two--wide-right { grid-template-columns: 1fr 1.25fr; }
.ds-deck__two--center { align-items: center; }

.ds-deck__grid {
  display: grid;
  gap: 12px;
}

.ds-deck__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-deck__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-deck__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ds-deck__card {
  padding: 12px 14px;
  border: 1.5px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-bg);
  font-size: 16px;
  line-height: 1.4;
}

.ds-deck__card strong {
  display: block;
  margin-bottom: 3px;
  font-size: 17px;
}

.ds-deck__card p { margin: 0; }

.ds-deck__card .ds-deck__code {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--ds-muted);
}

.ds-deck__grid--roomy {
  margin: auto 0;
  gap: 14px;
}

.ds-deck__grid--roomy .ds-deck__card {
  padding: 16px 18px;
  font-size: 17px;
}

.ds-deck__grid--roomy .ds-deck__card strong { font-size: 18.5px; margin-bottom: 5px; }

.ds-deck__callout {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--ds-surface-strong);
  font-size: 16.5px;
  line-height: 1.45;
}

.ds-deck__figure {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 8px 0 12px;
}

.ds-deck__figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ds-deck__pic {
  padding: 8px;
  border-radius: 12px;
  background: #fff;
}

.ds-deck__pic img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ds-deck__photo {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--ds-shadow);
}

.ds-deck__caption {
  margin-top: 4px;
  color: var(--ds-muted);
  font-size: 14px;
  text-align: center;
}

/* pros / cons */
.ds-deck__pc {
  padding: 12px 14px;
  border: 1.5px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-bg);
}

.ds-deck__pc h3 { font-size: 17px; }
.ds-deck__pc--pro h3 { color: var(--ds-good); }
.ds-deck__pc--con h3 { color: var(--ds-bad); }

.ds-deck__pc ul {
  padding-left: 0;
  list-style: none;
  font-size: 16.5px;
}

.ds-deck__pc li {
  position: relative;
  padding-left: 22px;
}

.ds-deck__pc li::before {
  position: absolute;
  left: 0;
  font-weight: 800;
}

.ds-deck__pc--pro li::before { content: "+"; color: var(--ds-good); }
.ds-deck__pc--con li::before { content: "−"; color: var(--ds-bad); }

/* tables */
.ds-deck__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.3;
}

.ds-deck__table th,
.ds-deck__table td {
  padding: 6px 10px;
  border: 1.5px solid var(--ds-border);
  text-align: left;
  vertical-align: top;
}

.ds-deck__table th {
  background: var(--ds-surface-strong);
}

.ds-deck__table td.num,
.ds-deck__table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ds-deck__table td.c,
.ds-deck__table th.c {
  text-align: center;
  white-space: nowrap;
}

.ds-deck__table code { background: none !important; padding: 0 !important; }

.ds-deck__foot {
  margin-top: 8px;
  color: var(--ds-muted);
  font-size: 13.5px;
}

/* code blocks */
.ds-deck__slide pre {
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-bg);
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
}

.ds-deck__slide pre.is-tight {
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.38;
}

.ds-deck__slide pre .cm { color: var(--ds-muted); }
.ds-deck__slide pre .kw { color: var(--ds-link); font-weight: 700; }

.ds-deck__tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--ds-link);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* building blocks slide */
.ds-deck__panel {
  padding: 10px;
  border: 1.5px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-bg);
  text-align: center;
}

.ds-deck__panel strong { display: block; margin-bottom: 6px; }

.ds-deck__panel .ds-deck__pic {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 120px;
}

.ds-deck__panel .ds-deck__pic img { height: 88px; width: auto; }

.ds-deck__cells { display: flex; border: 1.5px solid #6b8fd6; }

.ds-deck__cells > span {
  display: flex;
  align-items: center;
  padding: 2px;
  border-right: 1.5px solid #6b8fd6;
  background: #eef3fc;
}

.ds-deck__cells > span:last-child { border-right: 0; }
.ds-deck__cells img { height: 64px !important; }
.ds-deck__arrow { color: #4a6fb8; font-size: 20px; font-weight: 800; }

/* data organization mini diagrams */
.ds-deck__mini figure { margin: 0; text-align: center; }
.ds-deck__mini svg { width: 100%; height: 100px; }
.ds-deck__mini figcaption { color: var(--ds-muted); font-size: 14px; }

/* interactive demos */
.ds-deck__demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1.5px dashed var(--ds-border);
  border-radius: 12px;
  background: var(--ds-bg);
}

.ds-deck__ops {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.ds-deck__status {
  min-height: 22px;
  color: var(--ds-muted);
  font-size: 14.5px;
  text-align: center;
}

.ds-deck__status b { color: var(--ds-text); }

.ds-deck__stackbox {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  width: 90px;
  height: 204px;
  padding: 2px;
  border: 2px solid var(--ds-link);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.ds-deck__queuebox {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 400px;
  height: 66px;
  padding: 6px;
  border-top: 2px solid var(--ds-link);
  border-bottom: 2px solid var(--ds-link);
}

.ds-deck__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 100%;
  height: 32px;
  margin-top: 2px;
  border: 1.5px solid var(--ds-link);
  border-radius: 6px;
  background: var(--ds-node);
  font-weight: 700;
  font-size: 16px;
  position: relative;
}

.ds-deck__queuebox .ds-deck__item { width: 56px; height: 48px; margin: 0; font-size: 18px; }

.ds-deck__item.is-hot { background: var(--ds-hot); }

.ds-deck__item[data-label]::after {
  content: attr(data-label);
  position: absolute;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ds-deck__stackbox .ds-deck__item[data-label]::after { left: calc(100% + 10px); }
.ds-deck__queuebox .ds-deck__item[data-label]::after { top: -34px; left: 50%; transform: translateX(-50%); font-size: 13px; }

.ds-deck__arr {
  display: flex;
}

.ds-deck__arr button {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 62px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-text);
  font: inherit;
  cursor: pointer;
}

.ds-deck__arr button span:first-child {
  color: var(--ds-muted);
  font-size: 13px;
}

.ds-deck__arr button span:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 46px;
  margin-left: -1.5px;
  border: 1.5px solid var(--ds-link);
  background: var(--ds-node);
  font-weight: 700;
}

.ds-deck__arr button.is-hot span:last-child { background: var(--ds-hot); }

.ds-deck__demo--big .ds-deck__arr button { width: 78px; }
.ds-deck__demo--big .ds-deck__arr button span:first-child { font-size: 14px; }
.ds-deck__demo--big .ds-deck__arr button span:last-child { height: 56px; font-size: 22px; }

.ds-deck__arr button:focus-visible span:last-child {
  outline: 3px solid color-mix(in srgb, var(--ds-link) 35%, transparent);
  outline-offset: 1px;
}

/* SVG palette (theme aware) */
.ds-svg .box { fill: var(--ds-node); stroke: var(--ds-link); stroke-width: 1.5; }
.ds-svg .box-empty { fill: none; stroke: var(--ds-link); stroke-width: 1.5; }
.ds-svg .line { stroke: var(--ds-link); stroke-width: 2; fill: none; }
.ds-svg .axis { stroke: var(--ds-muted); stroke-width: 1.2; fill: none; }
.ds-svg .grid { stroke: var(--ds-border); stroke-width: .6; stroke-dasharray: 3 4; fill: none; }
.ds-svg .txt { fill: var(--ds-text); font: 600 15px system-ui, sans-serif; }
.ds-svg .lbl { fill: var(--ds-muted); font: 13px system-ui, sans-serif; }
.ds-svg .ah { fill: var(--ds-link); }
.ds-svg .curve { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.ds-deck__answers {
  margin-top: 12px;
  padding: 8px 12px;
  border: 1.5px dashed var(--ds-border);
  border-radius: 12px;
  font-size: 15.5px;
}

.ds-deck__answers summary { font-weight: 700; cursor: pointer; }
.ds-deck__answers ol { margin-top: 6px; line-height: 1.4; }
.ds-deck__answers li { margin: 2px 0; }

/* ---------- steps ---------- */
.ds-deck__steps {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ds-deck__step { display: none; }
.ds-deck__step.is-on { display: block; }
.ds-deck__steps[data-mode="build"] .ds-deck__step.is-on:not(.is-current) { opacity: .55; }
.ds-deck__steps[data-mode="build"].is-plain .ds-deck__step.is-on { opacity: 1; }

.ds-deck__stepnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ds-muted);
}

.ds-deck__stepcount { min-width: 86px; text-align: center; font-variant-numeric: tabular-nums; }

.ds-deck__stepnote {
  min-height: 24px;
  margin: 6px 0 0;
  font-size: 16px;
  text-align: center;
}

/* ---------- controls ---------- */
.ds-deck__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px;
  border-top: 1.5px solid var(--ds-border);
  background: var(--ds-surface-strong);
  font-size: 14px;
}

.ds-deck__section {
  flex: 1;
  overflow: hidden;
  color: var(--ds-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-deck__counter {
  min-width: 62px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ds-deck__button {
  min-width: 38px;
  height: 34px;
  padding: 0 12px;
  border: 1.5px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease;
}

.ds-deck__button:hover:not(:disabled) { border-color: var(--ds-link); }
.ds-deck__button:disabled { opacity: .4; cursor: default; }

.ds-deck__button:focus-visible,
.ds-deck__select:focus-visible,
.ds-deck__screen:focus-visible .ds-deck__stage {
  outline: 3px solid color-mix(in srgb, var(--ds-link) 30%, transparent);
  outline-offset: 2px;
}

.ds-deck__button--sm { height: 30px; padding: 0 12px; font-size: 14px; }

.ds-deck__select {
  width: 190px;
  height: 34px;
  padding: 0 6px;
  border: 1.5px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
}

.ds-deck__hint {
  margin: 8px 0 0;
  color: var(--ds-muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- narrow screens: reflow instead of shrinking ---------- */
.ds-deck.is-fluid .ds-deck__screen { height: auto; overflow: visible; }

.ds-deck.is-fluid .ds-deck__stage {
  position: static;
  width: 100%;
  height: auto;
  transform: none !important;
  font-size: 16px;
}

.ds-deck.is-fluid .ds-deck__viewport { min-height: 460px; }
.ds-deck.is-fluid .ds-deck__slide { position: static; padding: 16px 16px 14px; overflow: visible; }
.ds-deck.is-fluid .ds-deck__slide h2 { font-size: 23px; }
.ds-deck.is-fluid .ds-deck__slide--title { min-height: 460px; }
.ds-deck.is-fluid .ds-deck__slide--title h1 { font-size: 38px; }

.ds-deck.is-fluid .ds-deck__two,
.ds-deck.is-fluid .ds-deck__grid--3,
.ds-deck.is-fluid .ds-deck__grid--4 { grid-template-columns: 1fr 1fr; }

.ds-deck.is-fluid .ds-deck__two { grid-template-columns: 1fr; }
.ds-deck.is-fluid .ds-deck__grid--2 { grid-template-columns: 1fr; }
.ds-deck.is-fluid .ds-deck__photo { width: 44%; height: auto; aspect-ratio: 1; }
.ds-deck.is-fluid .ds-deck__table { font-size: 13.5px; }
.ds-deck.is-fluid .ds-deck__table th,
.ds-deck.is-fluid .ds-deck__table td { padding: 4px 6px; }
.ds-deck.is-fluid .ds-deck__slide pre { font-size: 12.5px; overflow-x: auto; }
.ds-deck.is-fluid .ds-deck__section,
.ds-deck.is-fluid .ds-deck__select { display: none; }
.ds-deck.is-fluid .ds-deck__bar { justify-content: space-between; }

/* ---------- print: one slide per page ---------- */
@media print {
  .ds-deck { width: 800px; }
  .ds-deck__screen { height: auto !important; overflow: visible; }
  .ds-deck__stage { position: static; height: auto; transform: none !important; border: 0; box-shadow: none; }
  .ds-deck__viewport { display: block; }
  .ds-deck__slide {
    position: relative;
    display: flex !important;
    height: 600px;
    border: 1px solid #ccc;
    break-after: page;
    animation: none;
  }
  .ds-deck__bar, .ds-deck__progress, .ds-deck__hint, .ds-deck__ops { display: none; }
  .ds-deck__answers { display: none; }
  .ds-deck__stepnav { display: none; }
  .ds-deck__step { display: none !important; }
  .ds-deck__step:nth-last-child(2) { display: block !important; }
}