.format-studio {
  --format-ink: #f4ecdf;
  --format-gold: #ead4a8;
  --format-line: #b8a58755;
  --format-ratio: 1.77778;
  padding-block: clamp(40px,6.8vw,104px);
  background: #201d19;
  color: var(--format-ink);
  border-block: 1px solid var(--format-line);
}
.format-studio[data-format="reels"] { --format-ratio: .5625; }
.format-studio[data-format="feed"] { --format-ratio: .8; }
.format-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; gap: clamp(25px,6vw,84px); }
.format-kicker { margin-bottom: 9px; color: var(--format-gold); font: 700 11px/1.3 var(--sans); letter-spacing: .11em; }
#yayin-formatlari h2 { font: 400 clamp(33px,5vw,77px)/.99 var(--serif); letter-spacing: -.055em; }
.format-copy>p:not(.format-kicker),.format-note { color: #d6c9b9; font-size: clamp(14px,1.3vw,17px); line-height: 1.55; }
.format-copy>p:not(.format-kicker) { margin-block: 12px 18px; max-width: 41ch; }
.format-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.format-options button {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-height: 56px;
  border: 1px solid var(--format-line);
  padding: 7px 10px;
  background: #151310;
  color: var(--format-ink);
}
.format-options button[aria-pressed="true"] { background: var(--format-gold); color: #1c1712; border-color: var(--format-gold); }
.format-options button:hover { border-color: var(--format-gold); }
.format-options strong { font: 700 15px/1.2 var(--mono); }
.format-options span { font-size: 12px; font-weight: 650; }
.format-context { min-height: 66px; margin-top: 13px; padding: 5px 0 5px 11px; border-left: 1px solid var(--format-line); }
.format-context strong { font-size: 15px; }
.format-note { margin-top: 2px; }
.format-brief { display: inline-flex; align-items: center; gap: 9px; margin-top: 13px; padding: 8px 10px; min-height: 44px; color: var(--format-gold); border: 1px solid var(--format-line); font-size: 13px; font-weight: 700; }
.format-brief:hover { border-color: var(--format-gold); color: var(--format-ink); }
.format-studio :focus-visible { outline: 2px solid var(--format-gold); outline-offset: 3px; }
.format-demo { margin: 0; min-width: 0; }
.format-stage {
  --format-height: clamp(240px,35vw,430px);
  display: grid;
  place-items: center;
  height: calc(var(--format-height) + 22px);
  padding: 10px;
  background: radial-gradient(ellipse at center,#29241c,#141210 72%);
  border: 1px solid var(--format-line);
}
.format-frame { width: min(100%, calc(var(--format-height) * var(--format-ratio))); aspect-ratio: var(--format-ratio); position: relative; overflow: hidden; background: #0e0d0b; border: 1px solid var(--format-line); }
.format-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.format-demo figcaption { display: flex; justify-content: space-between; gap: 8px; color: var(--format-gold); margin-top: 7px; font: 650 10px/1.3 var(--sans); letter-spacing: .07em; }
.format-ratio { font-family: var(--mono); white-space: nowrap; }
@media(max-width:730px) {
  .format-layout { grid-template-columns: 1fr; }
  .format-stage { --format-height: clamp(230px,62vw,380px); }
}