* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #0b0c10; color:#e6e6e6; }

.topbar {
  position: sticky; top: 0; height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
  z-index: 5;
}
.brand { font-weight: 600; letter-spacing: .2px; }
.count { font-variant-numeric: tabular-nums; opacity:.85; }

.feed { width: 100%; }

.frame {
  position: relative;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #0b0c10;
  display: grid; place-items: center;
  overflow: hidden;
  min-height: 100vh;
}

/* Her zaman ekrana sığdır */
.frame img {
  display: block;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 60px);
  object-fit: contain;
  background: #0f1116;
}

.caption {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  max-width: min(92vw, 1100px); padding: 6px 10px; font-size: 13px; opacity:.9;
  background: rgba(0,0,0,.45); border-radius: 999px; backdrop-filter: blur(6px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sentinel { height: 1px; }

@media (prefers-color-scheme: light) {
  body { background: #f6f7fb; color:#101113; }
  .frame { border-color: rgba(0,0,0,.08); background: #fff; }
  .caption { background: rgba(255,255,255,.75); color:#101113; }
  .topbar { background: rgba(255,255,255,.7); }
}