/* ==========================================================================
   Digital Showcase
   Bölüm iskeleti · kategori sekmeleri · bilgi paneli · sahne · kontroller
   · çerçeveler (browser / window / card) · ekran şablonları
   · kategoriye özel kompozisyonlar · büyük önizleme
   Not: Yalnızca bu bölüme özgüdür; global token'ları kullanır, değiştirmez.
   ========================================================================== */

/* ---------- Bölüm iskeleti ---------- */
.showcase {
  padding-block: var(--space-section);
  background: var(--c-graphite);
  color: var(--c-on-dark);
}
.showcase__body {
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.showcase__panel { display: flex; flex-direction: column; gap: 36px; position: sticky; top: 104px; }

/* ---------- Kategori sekmeleri (2×2) ---------- */
.sc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--radius-m);
}
.sc-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--radius-s);
  font-size: var(--fs-small);
  color: var(--c-on-dark-2);
  text-align: left;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.sc-tab:hover { color: var(--c-on-dark); background: rgba(245, 245, 242, 0.04); }
.sc-tab .mono { font-size: 10px; color: var(--c-on-dark-3); }
.sc-tab__count { margin-left: auto; font-family: var(--f-mono); font-size: 10px; color: var(--c-on-dark-3); }
.sc-tab[aria-selected="true"] { background: var(--c-graphite-3); color: var(--c-on-dark); }
.sc-tab[aria-selected="true"] .sc-tab__count { color: var(--c-accent); }

/* ---------- Bilgi paneli ---------- */
.sc-info { transition: opacity 0.22s ease, transform 0.22s ease; }
.sc-info.is-swapping { opacity: 0; transform: translateY(8px); }
.sc-info__kicker { color: var(--c-on-dark-3); display: flex; gap: 10px; }
.sc-info__kicker b { color: var(--c-accent); font-weight: 400; }
.sc-info__name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 14px 0 16px;
}
.sc-info__desc { color: var(--c-on-dark-2); max-width: 42ch; margin-bottom: 28px; }
.sc-info .meta-list dd .tags { gap: 4px; }
.sc-highlight { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 16px; padding: 20px 0 22px; margin-bottom: 26px; border-bottom: 1px solid var(--c-line-dark); }
.sc-highlight .mono { grid-column: 1 / -1; color: var(--c-on-dark-3); }
.sc-highlight b {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(34px, 3.2vw, 46px);
  letter-spacing: -0.05em;
  line-height: 0.95;
  white-space: nowrap;
}
.sc-highlight span:last-child { font-size: 13px; color: var(--c-on-dark-2); max-width: 22ch; padding-bottom: 3px; }

/* ---------- Sahne ---------- */
.stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 100 / 68;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--radius-m);
  background-color: var(--c-graphite-2);
  background-image: radial-gradient(rgba(245, 245, 242, 0.09) 1px, transparent 1.2px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.stage.is-dragging { cursor: grabbing; }
.stage:focus-visible { outline-offset: 4px; }
.stage__label { position: absolute; z-index: 6; color: var(--c-on-dark-3); pointer-events: none; }
.stage__label--tl { top: 16px; left: 18px; }
.stage__label--tr { top: 16px; right: 18px; color: var(--c-on-dark-2); }
.stage__label--bl { bottom: 16px; left: 18px; }
.stage__label--br { bottom: 16px; right: 18px; }
.stage__axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--c-line-dark); }
.stage__axis--h { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
.sc-comps { position: absolute; inset: 0; }

/* ---------- Kontroller ---------- */
.sc-controls { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.sc-counter { color: var(--c-on-dark-3); min-width: 64px; }
.sc-counter b { color: var(--c-on-dark); font-weight: 500; }
.sc-dots { display: flex; gap: 6px; flex: 1; }
.sc-dot {
  flex: 1;
  max-width: 56px;
  height: 22px;
  position: relative;
}
.sc-dot::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 10px;
  height: 2px;
  background: var(--c-line-dark-strong);
  transition: background-color 0.3s ease;
}
.sc-dot:hover::before { background: var(--c-on-dark-3); }
.sc-dot[aria-current="true"]::before { background: var(--c-accent); }
.sc-arrows { display: flex; gap: 6px; }
.sc-arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--c-line-dark-strong);
  border-radius: var(--radius-s);
  color: var(--c-on-dark);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.sc-arrow svg { width: 16px; height: 16px; }
.sc-arrow:hover:not(:disabled) { border-color: var(--c-on-dark-2); }
.sc-arrow:disabled { opacity: 0.3; cursor: default; }
.sc-hint { margin-top: 14px; color: var(--c-on-dark-3); }

/* ==========================================================================
   Kompozisyon & katmanlar
   Katman konumları showcase.js tarafından hesaplanır (--x --y --s --z).
   Tıklanan ekran ortaya / öne gelir, diğerleri yanlara çekilir.
   ========================================================================== */
.sc-comp { position: absolute; inset: 0; will-change: transform, opacity; }
.sc-comp.is-snapping { transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out); }
.sc-comp.is-leaving { animation: sc-out 0.45s var(--ease-io) forwards; pointer-events: none; }
@keyframes sc-out { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -5cqw)); } }

.sc-layer {
  position: absolute;
  left: 50%; top: 50%;
  z-index: var(--z, 1);
  transform: translate(-50%, -50%) translate(var(--x, 0cqw), var(--y, 0cqw)) scale(var(--s, 1));
  transition: transform 1s var(--ease-out);
}
.sc-comp.is-static .sc-layer { transition: none; }
.sc-layer__in {
  position: relative;
  cursor: pointer;
  outline: none;
  animation: sc-in 0.95s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}
.sc-layer.is-focus .sc-layer__in { cursor: inherit; }
.stage:not(.is-in) .sc-layer__in { animation-play-state: paused; }
.stage.is-dragging .sc-layer__in { cursor: grabbing; }
@keyframes sc-in {
  from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 7cqw)) scale(0.96); }
}
.sc-frame { width: var(--w); transition: transform 0.5s var(--ease-out); }
.sc-layer:not(.is-focus) .sc-frame { filter: brightness(0.65); }
.sc-layer:not(.is-focus) .sc-layer__in:hover .sc-frame { filter: brightness(0.85); transform: translateY(-1.5%); }
.sc-layer__in:focus-visible .sc-frame { outline: 2px solid var(--c-accent); outline-offset: 4px; }

/* "Öne getir" etiketi — ölçekten bağımsız boyutta kalır */
.sc-layer__in::after {
  content: "Öne getir";
  position: absolute; z-index: 9;
  top: 0; right: 0;
  padding: 4px 7px 3px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  background: var(--c-graphite); color: var(--c-on-dark);
  border: 1px solid var(--c-line-dark-strong);
  border-radius: var(--radius-xs);
  transform-origin: top right;
  transform: translate(0, -130%) scale(calc(1 / var(--s, 1)));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.sc-layer:not(.is-focus) .sc-layer__in:hover::after,
.sc-layer:not(.is-focus) .sc-layer__in:focus-visible::after { opacity: 1; }
.stage.is-dragging .sc-layer__in::after { opacity: 0; }

/* Mira bar animasyonu showcase içinde her render'da yeniden oynar */
.sc-comp .mira__chart i { transform: none; animation: sc-bar 1s var(--ease-out) backwards; animation-delay: calc(400ms + var(--i, 0) * 60ms); }
@keyframes sc-bar { from { transform: scaleY(0.05); } }

/* ==========================================================================
   Çerçeveler
   ========================================================================== */
.sc-browser, .sc-window, .sc-card {
  container-type: inline-size;
  position: relative;
  background: var(--c-white);
  color: var(--c-ink);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.65);
}
.sc-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Browser */
.sc-browser__bar {
  display: flex; align-items: center; gap: 0.7cqw;
  height: 3.6cqw;
  padding: 0 1.4cqw;
  background: var(--c-paper-2);
  border-bottom: 1px solid var(--c-line);
}
.sc-browser__bar i { width: 0.9cqw; height: 0.9cqw; border-radius: 0.2cqw; background: var(--c-paper-3); }
.sc-browser__url {
  margin: 0 auto;
  min-width: 34%;
  padding: 0.35cqw 1.6cqw;
  background: var(--c-white);
  border-radius: 0.4cqw;
  text-align: center;
  font-family: var(--f-mono); font-size: 1.1cqw; color: var(--c-ink-3);
}
.sc-browser__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }

/* Desktop window */
.sc-window__bar {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  height: 3.8cqw;
  background: var(--c-graphite-3);
  color: var(--c-on-dark-2);
}
.sc-window__title { font-family: var(--f-mono); font-size: 1.2cqw; letter-spacing: 0.03em; }
.sc-window__ctrl { position: absolute; right: 0; top: 0; bottom: 0; display: flex; }
.sc-window__ctrl i { position: relative; width: 4.4cqw; }
.sc-window__ctrl i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.2cqw; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.sc-window__ctrl i:nth-child(2)::before { height: 1.2cqw; background: none; border: 1px solid currentColor; }
.sc-window__ctrl i:nth-child(3)::before { transform: translate(-50%, -50%) rotate(45deg); }
.sc-window__ctrl i:nth-child(3)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.2cqw; height: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(-45deg); }
.sc-window__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.sc-window--flow .sc-window__view { aspect-ratio: 520 / 230; }
.sc-window--flow .sc-window__bar { height: 5cqw; }
.sc-window--flow .sc-window__title { font-size: 1.6cqw; }

/* Card */
.sc-card { border-radius: 10px; }

/* ==========================================================================
   Ekran şablonları — telefon (birim: cihaz genişliği)
   ========================================================================== */
.sc-m { background: var(--c-white); color: var(--c-ink); font-size: 3.6cqw; }
.sc-m__body { padding: 0 1.9em; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sc-m__eyebrow { font-family: var(--f-mono); font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); margin-top: 1.4em; }
.sc-m__title { font-family: var(--f-display); font-weight: 500; font-size: 2.1em; letter-spacing: -0.04em; line-height: 1.05; margin: 0.15em 0 0.6em; }
.sc-m__sub { color: var(--c-ink-3); font-size: 0.95em; margin: -0.3em 0 1em; }
.sc-m__search { flex: none; height: 2.9em; border-radius: 0.8em; background: var(--c-paper-2); display: flex; align-items: center; gap: 0.6em; padding: 0 1em; color: var(--c-ink-3); font-size: 0.95em; }
.sc-m__search::before { content: ""; width: 0.9em; height: 0.9em; border: 1px solid currentColor; border-radius: 50%; }
.sc-m__chips { display: flex; gap: 0.45em; margin: 1em 0 0.6em; overflow: hidden; flex: none; }
.sc-m__chips span { padding: 0.45em 0.9em; border: 1px solid var(--c-line); border-radius: 0.6em; font-size: 0.85em; white-space: nowrap; }
.sc-m__chips span:first-child { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.sc-m__rows li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9em; align-items: center; padding: 0.8em 0; border-top: 1px solid var(--c-line); }
.sc-m__rows li:first-child { border-top: 0; }
.sc-m__thumb { width: 2.6em; height: 2.6em; border-radius: 0.7em; background: var(--c-paper-2); position: relative; }
.sc-m__thumb::after { content: ""; position: absolute; inset: 0.85em; border: 1px solid var(--c-ink-2); border-radius: 0.2em; }
.sc-m__rows li:nth-child(2) .sc-m__thumb::after { border-radius: 50%; }
.sc-m__rows li:nth-child(3) .sc-m__thumb { background: var(--c-ink); }
.sc-m__rows li:nth-child(3) .sc-m__thumb::after { border-color: var(--c-paper); }
.sc-m__rows b { display: block; font-weight: 500; }
.sc-m__rows small { display: block; font-size: 0.82em; color: var(--c-ink-3); }
.sc-m__rows em { font-style: normal; font-family: var(--f-mono); font-size: 0.88em; }

.sc-m__hero {
  flex: none;
  margin-top: 1.2em;
  height: 12.5em;
  border-radius: 1em;
  background: var(--c-graphite);
  color: var(--c-on-dark);
  padding: 1.3em 1.4em;
  display: flex; flex-direction: column; justify-content: space-between;
}
.sc-m__hero .mono { font-size: 0.75em; color: var(--c-on-dark-2); }
.sc-m__hero b { font-family: var(--f-display); font-weight: 500; font-size: 3.6em; letter-spacing: -0.05em; line-height: 0.9; }
.sc-m__track { height: 0.4em; background: rgba(245, 245, 242, 0.14); }
.sc-m__track i { display: block; height: 100%; background: var(--c-accent); }
.sc-m__hero + .sc-m__title { margin-top: 0.7em; }
.sc-m__dl div { display: flex; justify-content: space-between; padding: 0.75em 0; border-top: 1px solid var(--c-line); font-size: 0.95em; }
.sc-m__dl dt { color: var(--c-ink-3); }
.sc-m__cta { margin-top: auto; margin-bottom: 2.4em; flex: none; height: 3.3em; border-radius: 0.8em; background: var(--c-ink); color: var(--c-paper); display: grid; place-items: center; font-weight: 500; }

/* Map */
.sc-m__map { position: absolute; inset: 0 0 38% 0; background: var(--c-paper-2); }
.sc-m__map svg { width: 100%; height: 100%; }
.sc-m__map .st { stroke: var(--c-white); stroke-width: 3; fill: none; }
.sc-m__map .st2 { stroke: var(--c-paper-3); stroke-width: 1.4; fill: none; }
.sc-m__map .wt { fill: var(--c-paper-3); }
.sc-m__map .rt { stroke: var(--c-accent); stroke-width: 2.4; fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-m__map .pt { fill: var(--c-white); stroke: var(--c-ink); stroke-width: 1.4; }
.sc-m__map .pt--end { fill: var(--c-ink); }
.sc-m--map .scr__status { position: relative; z-index: 2; }
.sc-m__sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 46%;
  background: var(--c-white);
  border-radius: 1.4em 1.4em 0 0;
  box-shadow: 0 -1px 0 var(--c-line);
  padding: 0.8em 1.9em 0;
  display: flex; flex-direction: column;
}
.sc-m__handle { align-self: center; width: 3em; height: 0.3em; border-radius: 1em; background: var(--c-paper-3); margin-bottom: 1em; flex: none; }
.sc-m__sheet .sc-m__title { font-size: 1.6em; margin: 0 0 0.2em; }
.sc-m__eta { display: flex; justify-content: space-between; font-size: 0.85em; color: var(--c-ink-3); margin-bottom: 0.6em; }
.sc-m__eta b { color: var(--c-accent); font-family: var(--f-mono); font-weight: 400; }
.sc-m__steps li { display: grid; grid-template-columns: 2.4em 1fr auto; gap: 0.8em; align-items: center; padding: 0.5em 0; font-size: 0.92em; }
.sc-m__steps li span:first-child { height: 1.8em; display: grid; place-items: center; border: 1px solid var(--c-ink); border-radius: 0.3em; font-family: var(--f-mono); font-size: 0.8em; }
.sc-m__steps em { font-style: normal; font-family: var(--f-mono); font-size: 0.85em; color: var(--c-ink-3); }
.sc-m__sheet .sc-m__cta { margin-bottom: 2em; }

/* Grid (pazaryeri) */
.sc-m__head { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2em; }
.sc-m__head .sc-m__title { margin: 0; }
.sc-m__bag { width: 2.4em; height: 2.4em; border: 1px solid var(--c-line-strong); border-radius: 0.6em; position: relative; }
.sc-m__bag::after { content: ""; position: absolute; top: 0.4em; right: 0.4em; width: 0.5em; height: 0.5em; background: var(--c-accent); }
.sc-m__banner {
  flex: none; position: relative; overflow: hidden;
  margin: 1em 0 1.2em; height: 8.4em; border-radius: 1em;
  background: var(--c-paper-3);
  padding: 1.2em 1.3em;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sc-m__banner::before { content: ""; position: absolute; right: -1.6em; top: -1.6em; width: 7em; height: 7em; border-radius: 50%; background: var(--c-ink); }
.sc-m__banner::after { content: ""; position: absolute; right: 2.4em; top: 2.2em; width: 1.4em; height: 1.4em; background: var(--c-accent); }
.sc-m__banner small { position: relative; font-family: var(--f-mono); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-ink-3); }
.sc-m__banner b { position: relative; font-family: var(--f-display); font-weight: 500; font-size: 1.35em; letter-spacing: -0.03em; line-height: 1.1; max-width: 8em; }
.sc-m__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1em 0.9em; }
.sc-m__grid i { display: block; aspect-ratio: 1; border-radius: 0.8em; background: var(--c-paper-2); position: relative; overflow: hidden; margin-bottom: 0.5em; }
.sc-m__grid i::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 55%; border-radius: 40% 40% 0 0; background: var(--c-ink-2); }
.sc-m__grid div:nth-child(2) i::after { left: 25%; right: 25%; top: 25%; bottom: 25%; height: auto; border-radius: 50%; background: var(--c-paper-3); border: 1px solid var(--c-ink-2); }
.sc-m__grid div:nth-child(3) i::after { left: 0; right: 0; height: 40%; border-radius: 0; background: var(--c-paper-3); }
.sc-m__grid div:nth-child(4) i { background: var(--c-paper-3); }
.sc-m__grid div:nth-child(4) i::after { left: 20%; right: 20%; height: 30%; border-radius: 0.4em; background: var(--c-white); }
.sc-m__grid b { display: block; font-weight: 500; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-m__grid small { font-family: var(--f-mono); font-size: 0.82em; color: var(--c-ink-3); }

/* ==========================================================================
   Web sitesi şablonu — tek veri, üç varyant (em tabanlı ölçek)
   ========================================================================== */
.site { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--c-white); color: var(--c-ink); overflow: hidden; }
.site > * { flex-shrink: 0; }
.site--desktop { font-size: 1.15cqw; }
.site--tablet  { font-size: 2.35cqw; }
.site--mobile  { font-size: 3.7cqw; }

.site__nav { display: flex; align-items: center; gap: 2em; padding: 1.4em 2.6em; font-size: 0.95em; }
.site__brand { font-family: var(--f-display); font-weight: 600; font-size: 1.5em; letter-spacing: -0.04em; margin-right: auto; }
.site__links { display: flex; gap: 1.8em; color: var(--c-ink-2); }
.site__btn { padding: 0.55em 1em; border: 1px solid var(--c-line-strong); border-radius: 0.4em; }
.site__burger { display: none; width: 1.6em; height: 0.75em; border-top: 1.5px solid; border-bottom: 1.5px solid; }

.site__hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.4em; margin: 0 2.6em; padding: 3.4em 3em; border-radius: 0.6em; background: var(--c-paper-2); }
.site--dark .site__hero { background: var(--c-graphite); color: var(--c-on-dark); }
.site__eyebrow { font-family: var(--f-mono); font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.site--dark .site__eyebrow { color: var(--c-on-dark-2); }
.site__h { font-family: var(--f-display); font-weight: 500; font-size: 3.5em; line-height: 0.98; letter-spacing: -0.045em; margin: 0.35em 0 0.45em; }
.site__sub { color: var(--c-ink-3); max-width: 26em; line-height: 1.45; }
.site--dark .site__sub { color: var(--c-on-dark-2); }
.site__cta { display: inline-flex; margin-top: 1.6em; padding: 0.8em 1.3em; background: var(--c-ink); color: var(--c-paper); border-radius: 0.4em; font-weight: 500; }
.site--dark .site__cta { background: var(--c-paper); color: var(--c-ink); }
.site__art { position: relative; border-radius: 0.4em; overflow: hidden; min-height: 12em; }
.site__art--waves { background-color: var(--c-graphite-2); background-image: repeating-linear-gradient(0deg, rgba(245, 245, 242, 0.14) 0 1px, transparent 1px 0.7em); }
.site__art--waves::before { content: ""; position: absolute; right: 18%; top: 18%; width: 2.6em; height: 2.6em; background: var(--c-accent); }
.site__art--waves::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%; background: var(--c-graphite); }
.site__art--arch { background: var(--c-paper-3); }
.site__art--arch::before { content: ""; position: absolute; left: 16%; width: 42%; bottom: 0; height: 80%; background: var(--c-white); border-radius: 50em 50em 0 0; }
.site__art--arch::after { content: ""; position: absolute; left: 50%; width: 30%; bottom: 0; height: 50%; background: var(--c-ink); }
.site__art--product { background: var(--c-paper-3); }
.site__art--product::before { content: ""; position: absolute; left: 38%; width: 24%; bottom: 22%; height: 52%; background: var(--c-ink-2); border-radius: 45% 45% 14% 14%; }
.site__art--product::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 22%; background: var(--c-white); }

.site__sec { display: flex; justify-content: space-between; align-items: baseline; margin: 2.4em 2.6em 1.2em; }
.site__sec b { font-family: var(--f-display); font-weight: 500; font-size: 1.6em; letter-spacing: -0.03em; }
.site__sec span { font-family: var(--f-mono); font-size: 0.75em; color: var(--c-ink-3); }
.site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; margin: 0 2.6em; }
.site__card i { display: block; aspect-ratio: 4 / 3; border-radius: 0.4em; background: var(--c-paper-2); position: relative; overflow: hidden; margin-bottom: 0.8em; }
.site__card i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--c-paper-3); }
.site__card:nth-child(2) i::after { height: 64%; background: var(--c-graphite-4); }
.site__card:nth-child(3) i::after { left: 30%; right: 30%; top: 25%; bottom: 25%; height: auto; border-radius: 50%; background: var(--c-ink-2); }
.site__card b { display: block; font-weight: 500; }
.site__card small { font-family: var(--f-mono); font-size: 0.8em; color: var(--c-ink-3); }

.site--tablet .site__nav, .site--mobile .site__nav { padding: 1.3em 1.8em; }
.site--tablet .site__links, .site--mobile .site__links { display: none; }
.site--tablet .site__burger, .site--mobile .site__burger { display: block; }
.site--tablet .site__hero { grid-template-columns: 1fr; margin: 0 1.8em; padding: 2.6em 2.4em; gap: 2em; }
.site--tablet .site__art { min-height: 9em; }
.site--tablet .site__sec, .site--mobile .site__sec { margin-inline: 1.8em; }
.site--tablet .site__cards { grid-template-columns: repeat(2, 1fr); margin: 0 1.8em; }
.site--tablet .site__card:nth-child(3) { display: none; }
.site--mobile .site__nav { padding-top: 3.4em; }
.site--mobile .site__btn { display: none; }
.site--mobile .site__hero { grid-template-columns: 1fr; margin: 0 1.2em; padding: 2em 1.6em; gap: 1.6em; }
.site--mobile .site__h { font-size: 2.5em; }
.site--mobile .site__sub { font-size: 0.92em; }
.site--mobile .site__art { min-height: 7.5em; }
.site--mobile .site__cards { grid-template-columns: 1fr; margin: 0 1.2em; }

/* ==========================================================================
   SaaS şablonları — dashboard / pipeline (birim: pencere genişliği)
   ========================================================================== */
.tpl-dash { position: absolute; inset: 0; display: flex; font-size: 1.1cqw; background: var(--c-white); }
.dash__side { width: 17%; flex: none; background: var(--c-graphite); color: var(--c-on-dark-2); padding: 1.8em 1.2em; display: flex; flex-direction: column; gap: 0.35em; }
.dash__logo { display: flex; align-items: center; gap: 0.7em; color: var(--c-on-dark); font-family: var(--f-display); font-weight: 600; font-size: 1.4em; letter-spacing: -0.03em; margin-bottom: 1.4em; }
.dash__logo i { width: 0.9em; height: 0.9em; background: var(--c-accent); }
.dash__nav { display: flex; align-items: center; gap: 0.8em; padding: 0.7em 0.8em; border-radius: 0.35em; }
.dash__nav i { width: 0.85em; height: 0.85em; border: 1px solid currentColor; border-radius: 0.15em; }
.dash__nav.is-on { background: var(--c-graphite-3); color: var(--c-on-dark); }
.dash__main { flex: 1; min-width: 0; padding: 1.8em 2.2em; display: flex; flex-direction: column; gap: 1.4em; }
.dash__top { display: flex; justify-content: space-between; align-items: center; }
.dash__crumb { display: block; font-family: var(--f-mono); font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.dash__h { display: block; font-family: var(--f-display); font-weight: 500; font-size: 2em; letter-spacing: -0.035em; margin-top: 0.2em; }
.dash__search { width: 24%; height: 2.4em; border: 1px solid var(--c-line); border-radius: 0.35em; display: flex; align-items: center; padding: 0 0.9em; color: var(--c-ink-3); font-size: 0.9em; }
.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--c-line); border-radius: 0.45em; }
.dash__kpi { padding: 1em 1.2em; border-left: 1px solid var(--c-line); }
.dash__kpi:first-child { border-left: 0; }
.dash__kpi small { display: block; font-family: var(--f-mono); font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.dash__kpi b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 2em; letter-spacing: -0.04em; margin: 0.15em 0 0.1em; }
.dash__kpi em { font-style: normal; font-family: var(--f-mono); font-size: 0.8em; color: var(--c-accent); }
.dash__chart { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: 0.45em; padding: 1em 1.2em; }
.dash__chart-head { display: flex; justify-content: space-between; font-weight: 500; }
.dash__chart-head span:last-child { font-family: var(--f-mono); font-weight: 400; font-size: 0.8em; color: var(--c-ink-3); }
.dash__chart svg { flex: 1; width: 100%; min-height: 0; margin-top: 0.6em; }
.dash__table { display: grid; }
.dash__row { display: grid; grid-template-columns: 1.1fr 2fr 1fr 0.8fr; gap: 1em; padding: 0.65em 0.3em; border-top: 1px solid var(--c-line); align-items: center; }
.dash__row:first-child { border-top: 0; font-family: var(--f-mono); font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.dash__row code { font-family: var(--f-mono); font-size: 0.85em; }
.pill { justify-self: start; padding: 0.2em 0.65em; border-radius: 0.3em; border: 1px solid var(--c-line-strong); font-family: var(--f-mono); font-size: 0.72em; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.pill.is-1 { border-color: var(--c-accent); color: var(--c-accent); }
.pill.is-2 { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }

/* Ortak çizgi grafik stilleri */
.viz-grid path { stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz-line { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.viz-cmp { fill: none; stroke: var(--c-line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.viz-area { fill: var(--c-accent-soft); stroke: none; }

/* Pipeline (CRM kanban) */
.pipe__chips { display: flex; gap: 0.5em; }
.pipe__chips span { padding: 0.4em 0.9em; border: 1px solid var(--c-line); border-radius: 0.35em; font-size: 0.9em; }
.pipe__chips span:first-child { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.pipe__cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.pipe__col { background: var(--c-paper); border-radius: 0.5em; padding: 0.9em; display: flex; flex-direction: column; gap: 0.7em; overflow: hidden; }
.pipe__col-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; padding: 0 0.2em 0.3em; }
.pipe__col-head span { font-family: var(--f-mono); font-size: 0.78em; color: var(--c-ink-3); font-weight: 400; }
.pipe__card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 0.4em; padding: 0.9em; display: grid; gap: 0.5em; }
.pipe__card.is-hot { border-color: var(--c-accent); box-shadow: inset 0.2em 0 0 var(--c-accent); }
.pipe__card b { font-weight: 500; }
.pipe__card div { display: flex; justify-content: space-between; align-items: center; }
.pipe__card code { font-family: var(--f-mono); font-size: 0.85em; color: var(--c-ink-2); }
.pipe__card i { width: 1.5em; height: 1.5em; border-radius: 0.3em; background: var(--c-paper-3); }

/* ==========================================================================
   Kart şablonları — chart / rows / note (birim: kart genişliği)
   ========================================================================== */
.tpl-card { font-size: 4.2cqw; padding: 1.4em 1.5em 1.5em; }
.card__head { display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size: 0.95em; }
.card__head span:last-child { font-family: var(--f-mono); font-weight: 400; font-size: 0.75em; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.card__value { display: block; font-family: var(--f-display); font-weight: 500; font-size: 2.6em; letter-spacing: -0.05em; line-height: 1; margin-top: 0.5em; }
.card__delta { display: block; font-family: var(--f-mono); font-size: 0.78em; color: var(--c-accent); margin-top: 0.4em; }
.card__viz { height: 5.4em; margin-top: 1.1em; }
.card__viz svg { width: 100%; height: 100%; }
.viz-bars { display: flex; align-items: flex-end; gap: 0.5em; height: 100%; border-bottom: 1px solid var(--c-line); }
.viz-bars i { flex: 1; height: var(--h); background: var(--c-paper-3); transform-origin: bottom; animation: sc-bar 0.9s var(--ease-out) backwards; animation-delay: calc(500ms + var(--i, 0) * 50ms); }
.viz-bars i.is-on { background: var(--c-accent); }
.card__rows { margin-top: 0.9em; }
.card__rows li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8em; align-items: center; padding: 0.7em 0; border-top: 1px solid var(--c-line); }
.card__rows .av { width: 2.1em; height: 2.1em; border-radius: 0.35em; background: var(--c-paper-2); display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.75em; color: var(--c-ink-2); }
.card__rows b { display: block; font-weight: 500; font-size: 0.92em; }
.card__rows small { display: block; font-size: 0.78em; color: var(--c-ink-3); }

.note__kicker { display: flex; align-items: center; gap: 0.6em; font-family: var(--f-mono); font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.note__kicker::before { content: ""; width: 0.7em; height: 0.7em; background: var(--c-accent); }
.note__title { font-family: var(--f-display); font-weight: 500; font-size: 1.45em; letter-spacing: -0.03em; line-height: 1.1; margin: 0.6em 0 0.4em; }
.note__meta { font-size: 0.85em; color: var(--c-ink-3); line-height: 1.4; }
.note__actions { display: flex; gap: 0.5em; margin-top: 1.1em; }
.note__actions span { padding: 0.55em 1em; border-radius: 0.35em; border: 1px solid var(--c-line-strong); font-size: 0.85em; font-weight: 500; }
.note__actions span:first-child { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }

/* ==========================================================================
   Özel yazılım şablonları — app / flow (birim: pencere genişliği)
   ========================================================================== */
.tpl-app { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 1.15cqw; background: var(--c-white); }
.app__toolbar { display: flex; align-items: center; gap: 0.5em; padding: 0.8em 1.2em; border-bottom: 1px solid var(--c-line); background: var(--c-paper); flex: none; }
.app__toolbar span { padding: 0.4em 0.9em; border: 1px solid var(--c-line); border-radius: 0.3em; background: var(--c-white); font-size: 0.9em; }
.app__toolbar span:first-child { border-color: var(--c-ink); }
.app__toolbar em { margin-left: auto; width: 22%; height: 2.1em; border: 1px solid var(--c-line); border-radius: 0.3em; background: var(--c-white); }
.app__body { flex: 1; min-height: 0; display: flex; }
.app__tree { width: 22%; flex: none; border-right: 1px solid var(--c-line); padding: 1em 0.8em; display: flex; flex-direction: column; gap: 0.2em; background: var(--c-paper); }
.app__tree small { font-family: var(--f-mono); font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); padding: 0 0.6em 0.6em; }
.app__tree span { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.6em; border-radius: 0.3em; font-size: 0.92em; color: var(--c-ink-2); white-space: nowrap; overflow: hidden; }
.app__tree span::before { content: ""; width: 0.55em; height: 0.55em; border: 1px solid currentColor; flex: none; }
.app__tree span.is-on { background: var(--c-white); color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-line); }
.app__tree span.is-on::before { background: var(--c-accent); border-color: var(--c-accent); }
.app__main { flex: 1; min-width: 0; padding: 1.2em 1.4em; display: flex; flex-direction: column; }
.app__status { display: flex; justify-content: space-between; padding: 0.5em 1.2em; border-top: 1px solid var(--c-line); font-family: var(--f-mono); font-size: 0.72em; color: var(--c-ink-3); background: var(--c-paper); flex: none; }
.app__status span:first-child::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.6em; background: var(--c-accent); }

/* Gantt */
.gantt { flex: 1; display: grid; grid-template-rows: auto repeat(5, 1fr); position: relative; }
.gantt__days { display: grid; grid-template-columns: repeat(5, 1fr); font-family: var(--f-mono); font-size: 0.75em; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 0.6em; border-bottom: 1px solid var(--c-line); }
.gantt__row { position: relative; border-bottom: 1px solid var(--c-line); background-image: linear-gradient(90deg, var(--c-line) 1px, transparent 1px); background-size: 20% 100%; }
.gantt__bar { position: absolute; top: 22%; bottom: 22%; left: calc(var(--s) * 20%); width: calc(var(--l) * 20%); background: var(--c-paper-3); border: 1px solid var(--c-line-strong); border-radius: 0.25em; font-size: 0.78em; padding: 0 0.6em; display: flex; align-items: center; white-space: nowrap; overflow: hidden; transform-origin: left; animation: sc-grow 0.9s var(--ease-out) backwards; animation-delay: calc(450ms + var(--i, 0) * 60ms); }
.gantt__bar.is-1 { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.gantt__bar.is-2 { background: repeating-linear-gradient(45deg, var(--c-paper-2) 0 0.35em, var(--c-paper-3) 0.35em 0.7em); }
.gantt__now { position: absolute; top: 1.6em; bottom: 0; left: 52%; width: 1px; background: var(--c-accent); }
.gantt__now::before { content: "Şimdi"; position: absolute; top: -0.2em; left: 0.4em; font-family: var(--f-mono); font-size: 0.7em; color: var(--c-accent); }
@keyframes sc-grow { from { transform: scaleX(0); } }

/* Table */
.grid-table { display: grid; }
.grid-table__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.9fr; gap: 1em; padding: 0.68em 0.4em; border-bottom: 1px solid var(--c-line); align-items: center; font-size: 0.95em; }
.grid-table__row:first-child { font-family: var(--f-mono); font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.grid-table__row:nth-child(2) { background: var(--c-accent-soft); }
.grid-table__row code { font-family: var(--f-mono); font-size: 0.88em; }

/* Document */
.doc { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4em; }
.doc__page { background: var(--c-paper); border-radius: 0.3em; padding: 1.4em 1.6em; display: flex; flex-direction: column; gap: 0.55em; overflow: hidden; }
.doc__page b { font-family: var(--f-display); font-weight: 500; font-size: 1.4em; letter-spacing: -0.03em; margin-bottom: 0.4em; }
.doc__page i { display: block; height: 0.5em; background: var(--c-paper-3); border-radius: 0.1em; }
.doc__page i:nth-child(3n) { width: 82%; }
.doc__page i.is-mark { background: var(--c-accent-soft); box-shadow: inset 0.2em 0 0 var(--c-accent); }
.doc__sign { margin-top: auto; height: 3.4em; border: 1px dashed var(--c-line-strong); border-radius: 0.3em; display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.72em; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.doc__side small { display: block; font-family: var(--f-mono); font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); margin-bottom: 0.6em; }
.doc__signer { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7em; align-items: center; padding: 0.7em 0; border-top: 1px solid var(--c-line); font-size: 0.92em; }
.doc__signer::before { content: ""; width: 1.8em; height: 1.8em; border-radius: 0.3em; background: var(--c-paper-2); }

/* Flow */
.tpl-flow { position: absolute; inset: 0; background: var(--c-paper); background-image: radial-gradient(var(--c-line) 1px, transparent 1.2px); background-size: 16px 16px; }
.tpl-flow svg { width: 100%; height: 100%; }
.flow__edge { fill: none; stroke: var(--c-ink-2); stroke-width: 1.4; }
.flow__edge.is-todo { stroke: var(--c-line-strong); stroke-dasharray: 4 4; }
.flow__edge.is-loop { stroke: var(--c-ink-3); stroke-dasharray: 2 4; }
.flow__node rect { fill: var(--c-white); stroke: var(--c-line-strong); stroke-width: 1.2; }
.flow__node text { font-family: var(--f-mono); font-size: 11px; fill: var(--c-ink-2); text-anchor: middle; dominant-baseline: central; letter-spacing: 0.02em; }
.flow__node.is-done rect { fill: var(--c-ink); stroke: var(--c-ink); }
.flow__node.is-done text { fill: var(--c-paper); }
.flow__node.is-active rect { fill: var(--c-white); stroke: var(--c-accent); stroke-width: 2; }
.flow__node.is-active text { fill: var(--c-accent); }
.flow__node.is-todo rect { stroke-dasharray: 3 3; }
.flow__node.is-branch rect { fill: var(--c-paper-2); }
.flow__pulse { fill: none; stroke: var(--c-accent); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: flow-pulse 2.4s var(--ease-out) infinite; }
@keyframes flow-pulse { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.25, 1.6); } }

/* ==========================================================================
   Cihaz varyantları — iPhone ayrıntısı · Android
   ========================================================================== */
.sc-frame.device--phone .device__screen::after,
.device--android .device__screen::after {
  content: "";
  position: absolute; z-index: 6;
  bottom: 2.2cqw; left: 50%;
  width: 32cqw; height: 1.1cqw;
  transform: translateX(-50%);
  border-radius: 1cqw;
  background: var(--c-ink);
  opacity: 0.85;
}
.device--android .device__frame {
  border-radius: 7.5cqw;
  padding: 2.4cqw;
  background: #1C1E22;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, var(--shadow-device);
}
.device--android .device__screen { border-radius: 5.6cqw; aspect-ratio: 9 / 20; }
.device--android .device__screen::before { /* punch-hole kamera */
  content: "";
  position: absolute; z-index: 6;
  top: 3.2cqw; left: 50%;
  width: 3.8cqw; height: 3.8cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #0C0D0F;
}
.device--android .scr__status { padding: 3.4cqw 7cqw 0; height: 10.5cqw; font-weight: 500; }

/* ==========================================================================
   Tablet uygulama şablonu — split (birim: tablet genişliği)
   ========================================================================== */
.sc-t { background: var(--c-white); color: var(--c-ink); font-size: 2.3cqw; }
.sc-t__bar { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 1.3em 2em 1em; font-size: 0.85em; font-weight: 600; }
.sc-t__bar b { font-family: var(--f-display); font-size: 1.5em; letter-spacing: -0.04em; }
.sc-t__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 38% 1fr; border-top: 1px solid var(--c-line); }
.sc-t__side { background: var(--c-paper); border-right: 1px solid var(--c-line); padding: 1.4em 1em; display: flex; flex-direction: column; gap: 0.3em; }
.sc-t__h { font-family: var(--f-mono); font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); padding: 0 0.8em 0.8em; }
.sc-t__item { padding: 0.9em 0.8em; border-radius: 0.5em; }
.sc-t__item b { display: block; font-weight: 500; font-size: 0.95em; }
.sc-t__item small { display: block; font-size: 0.8em; color: var(--c-ink-3); }
.sc-t__item.is-on { background: var(--c-white); box-shadow: 0 0 0 1px var(--c-line); }
.sc-t__item.is-on small { color: var(--c-accent); }
.sc-t__main { padding: 2em 2em 2.4em; display: flex; flex-direction: column; min-width: 0; }
.sc-t__eyebrow { font-family: var(--f-mono); font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.sc-t__big { font-family: var(--f-display); font-weight: 500; font-size: 3.6em; letter-spacing: -0.05em; line-height: 1; margin: 0.3em 0 0.2em; }
.sc-t__sub { font-size: 0.9em; color: var(--c-ink-3); }
.sc-t__viz { height: 9em; margin: 2em 0 1.4em; }
.sc-t__dl div { display: flex; justify-content: space-between; padding: 0.8em 0; border-top: 1px solid var(--c-line); font-size: 0.92em; }
.sc-t__dl dt { color: var(--c-ink-3); }
.sc-t__cta { margin-top: auto; height: 3em; border-radius: 0.5em; background: var(--c-ink); color: var(--c-paper); display: grid; place-items: center; font-weight: 500; }

/* ==========================================================================
   Scroll sahnesi — "site içinde site" açılışı, adım adım kategori, kapanış
   JS her karede şu değişkenleri yazar: --iy --ix --r --sc --op --chrome
   ========================================================================== */
.sc-scroll { position: relative; margin-top: var(--space-section); }
.showcase { position: relative; clip-path: inset(var(--iy, 0px) var(--ix, 0px) var(--iy, 0px) var(--ix, 0px) round var(--r, 0px)); }
.showcase__inner { transform: scale(var(--sc, 1)); opacity: var(--op, 1); transform-origin: 50% 42%; }
.sc-chrome {
  position: absolute; z-index: 10;
  top: var(--iy, 0px); left: var(--ix, 0px); right: var(--ix, 0px);
  height: 44px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
  background: var(--c-graphite-3);
  border-bottom: 1px solid var(--c-line-dark);
  opacity: var(--chrome, 0);
  pointer-events: none;
}
.sc-chrome__dots { display: flex; gap: 6px; }
.sc-chrome__dots i { width: 9px; height: 9px; border-radius: 2px; background: var(--c-graphite-4); }
.sc-chrome__url { margin: 0 auto; min-width: 30%; padding: 5px 16px; background: var(--c-graphite-2); border-radius: 4px; color: var(--c-on-dark-2); text-align: center; }

@media (min-width: 1025px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .sc-scroll { height: 440vh; }
  .sc-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .showcase { height: 100%; padding: 88px 0 22px; display: flex; flex-direction: column; }
  .showcase__inner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .showcase .section-head { row-gap: 8px; }
  .showcase .section-head__title { font-size: clamp(30px, 3vw, 46px); }
  .showcase .section-head__index { padding-top: 0.2em; }
  .showcase__body { flex: 1; min-height: 0; margin-top: clamp(18px, 3vh, 36px); }
  .showcase__panel { position: static; gap: 22px; }
  .sc-info__name { font-size: clamp(28px, 2.6vw, 38px); margin: 10px 0 12px; }
  .sc-info__desc { margin-bottom: 16px; }
  .sc-info .meta-list > div { padding: 9px 0; }
  .sc-highlight { padding: 12px 0 14px; margin-bottom: 16px; }
  .sc-highlight b { font-size: clamp(30px, 2.8vw, 40px); }
  .sc-viewer { display: flex; flex-direction: column; align-items: flex-end; }
  .stage, .sc-controls, .sc-hint { width: min(100%, calc((100vh - 290px) * 100 / 68)); }
  .sc-hint { margin-top: 10px; }

  /* Sekmelerde scroll ilerleme çizgisi */
  .sc-tab { position: relative; }
  .sc-tab::after {
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: 5px;
    height: 2px;
    background: var(--c-accent);
    transform: scaleX(var(--p, 0));
    transform-origin: left;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .showcase__body { grid-template-columns: 1fr; }
  /* Sekmeler sahnenin üstünde, proje bilgisi altında */
  .showcase__body { gap: 28px; }
  .showcase__panel { display: contents; }
  .sc-tabs { order: 1; max-width: 640px; }
  .sc-viewer { order: 2; }
  .sc-info { order: 3; max-width: 640px; margin-top: 12px; }
}

@media (max-width: 720px) {
  .stage { aspect-ratio: 1 / 1.12; }
  .stage__label--tr, .stage__label--bl, .stage__label--br { display: none; }
  .sc-hint { display: none; }
  .sc-controls { gap: 14px; }
  .sc-tab { height: 44px; padding: 0 12px; gap: 8px; }
}